这些问题的解决办法就是JavaScript：通过JavaScript生成输入框和按钮。现在最坏的情况就是JavaScript不能执行，即使如此，用户也能上传文件。虽然不那么好看，但是还是能工作的。
所以原来复杂的HTML变成了：
复制代码 代码如下:
<div>
<input type="file">
</div>
我们通过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;i<x.length;i++) {
if (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;
创建<div>和他的内容。需要的时候我们会复制它。
复制代码 代码如下:
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，如果不是<input type="file">则忽略。
复制代码 代码如下:
var x = document.getElementsByTagName('input');
for (var i=0;i<x.length;i++) {
if (x[i].type != 'file') continue;
再做一次检测：如果<input type="file">的父元素没有fileinputs的class，则忽略。
复制代码 代码如下:
if (x[i].parentNode.className != 'fileinputs') continue;
现在我们就找到了需要添加样式的上传框。首先我们添加一个hidden的类名。
复制代码 代码如下:
x[i].className = 'file hidden';
复制假的输入框然后添加在<input type="file">的父元素上。
复制代码 代码如下:
var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(clone);
现在我们就成功的添加了样式。但是还没有结束，我们希望用户在输入框内看到文件路径。
首先我们给<input type="file">创建一个属性，指向假的输入框：
复制代码 代码如下:
x[i].relatedElement = clone.getElementsByTagName('input')[0];
这样当用户改变了上传文件的时候我们就能很轻松及时的访问到假的输入框，然后复制路径。
在这有个问题，我们使用什么event呢？通常使用change事件，当上传文件改变的时候，假的输入框的值也随之改变。
但是Mozilla 1.6在上传框上不支持这个事件（Firefox支持）。所以我在这里添加一个onmouseout的事件。（IE下同样可以运行，Safari不行）
复制代码 代码如下: