css第五章简答题3代码,JavaScript CSS修改学习第五章 给“上传”添加样式_基础知识...

，让代码保持干净。

最后，对于一些旧的浏览器不能处理CSS，在Netscape和IE4里面文件输入就不可访问。对于那些没有CSS的浏览器，用户会看到两个输入框，而且不能理解第二个是干嘛的。

Netscape 4的问题

在Netscape 4里面用户只能看见按钮。可能是因为position:absolute的原因。

IE4的问题

在IE4里面会有一个诡异的原来的“浏览”按钮的影子，而且不能点击。没有解决办法

Netscape 3的问题

对于那些没有CSS功能的浏览器。虽然可以使用，但是两个输入框会让用户郁闷。

解决办法-JavaScript

这些问题的解决办法就是JavaScript：通过JavaScript生成输入框和按钮。现在最坏的情况就是JavaScript不能执行，即使如此，用户也能上传文件。虽然不那么好看，但是还是能工作的。

所以原来复杂的HTML变成了：

我们通过JavaScript来添加其他元素。

代码

var W3CDOM = (document.createElement && document.getElementsByTagName);

function initFileUploads() {

if (!W3CDOM) return;

var fakeFileUpload = document.createElement('div');

fakeFileUpload.className = 'fakefile';

fakeFileUpload.appendChild(document.createElement('input'));

var image = document.createElement('img');

image.src='pix/button_select.gif';

fakeFileUpload.appendChild(image);

var x = document.getElementsByTagName('input');

for (var i=0;iif (x[i].type != 'file') continue;

if (x[i].parentNode.className != 'fileinputs') continue;

x[i].className = 'file hidden';

var clone = fakeFileUpload.cloneNode(true);

x[i].parentNode.appendChild(clone);

x[i].relatedElement = clone.getElementsByTagName('input')[0];

x[i].onchange = x[i].onmouseout = function () {

this.relatedElement.value = this.value;

}

}

}

解释

如果浏览器不支持W3C DOM，那么什么也不做。

var W3CDOM = (document.createElement && document.getElementsByTagName);

function initFileUploads() {

if (!W3CDOM) return;

创建

和他的内容。需要的时候我们会复制它。

var fakeFileUpload = document.createElement('div');

fakeFileUpload.className = 'fakefile';

fakeFileUpload.appendChild(document.createElement('input'));

var image = document.createElement('img');

image.src='pix/button_select.gif';

fakeFileUpload.appendChild(image);

然后遍历页面上的所有input，如果不是则忽略。

var x = document.getElementsByTagName('input');

for (var i=0;iif (x[i].type != 'file') continue;

再做一次检测：如果的父元素没有fileinputs的class，则忽略。

if (x[i].parentNode.className != 'fileinputs') continue;

现在我们就找到了需要添加样式的上传框。首先我们添加一个hidden的类名。

x[i].className = 'file hidden';

复制假的输入框然后添加在的父元素上。

var clone = fakeFileUpload.cloneNode(true);

x[i].parentNode.appendChild(clone);

现在我们就成功的添加了样式。但是还没有结束，我们希望用户在输入框内看到文件路径。

首先我们给创建一个属性，指向假的输入框：

x[i].relatedElement = clone.getElementsByTagName('input')[0];

这样当用户改变了上传文件的时候我们就能很轻松及时的访问到假的输入框，然后复制路径。

在这有个问题，我们使用什么event呢？通常使用change事件，当上传文件改变的时候，假的输入框的值也随之改变。

但是Mozilla 1.6在上传框上不支持这个事件(Firefox支持)。所以我在这里添加一个onmouseout的事件。(IE下同样可以运行，Safari不行)

x[i].onchange = x[i].onmouseout = function () {

this.relatedElement.value = this.value; 3 }

问题和扩展

还有一个问题，用户在选择了一个文件之后就不能取消了。

假设用户选择了一个文件之后，突然不想上传了。通常只需要删除文件路径就可以了。但是在我们的例子里却很难，试一试，可以删除但是通常与感觉相反。

所以我们希望用户通过修改假的输入框也能修改真正的上传路径。

允许选择是可能的。当用户选择了上传文件的任何部分，我们就选择整个假输入框的全部内容。

[code] x[i].onselect = function () { 2 this.relatedElement.select(); 3 }

但是JavaScript的安全性不允许程序修改上传路径，所以我们不能通过让用户修改输入框的内容来修改真正的上传路径。所以我决定放弃onselect事件。

一种可行的办法是：给假的输入框添加一个清楚按钮，当用户点击之后就删除掉原来的上传框然后重新创建一个。这虽然笨重，但是能确实删除用户不想上传的文件路径。我不觉得这个一定可以工作，我也没有写这部分代码。

点击事件的路径

有读者建议，去掉那些繁杂的CSS，彻底隐藏上传框，然后把假的输入框的click事件绑定在真正的上传框上。非常棒的想法，而且比上面的简单的多。

[code] fakeField.onclick = function () { 2 realField.click() 3 }

这个click()方法允许你仿真一个表单项。复选框的点击，单选框被选中等等。然而Mozilla和Opera不支持。我想知道为什么，因为添加这个方法最大的不安全性就在于弹出一个选择文件的对话框而已。

所以我们也不能用这个简单的办法。

翻译地址：http://www.quirksmode.org/dom/inputfile.html

转载请保留以下信息

作者：北玉(tw:@rehawk)

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理

相关文章

相关视频