JavaScript CSS修改学习第五章：给“上传”添加样式

首先我们给<input type="file">创建一个属性，指向假的输入框：

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

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

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

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

1　x[i].onchange　=　x[i].onmouseout　=　function　()　{
2　　　　　this.relatedElement.value　=　this.value;
3　}

问题和扩展

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

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

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

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

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

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

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

点击事件的路径

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

1　fakeField.onclick　=　function　()　{
2　　　　　realField.click()
3　}

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

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

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

文章出处：http://beiyu.cnblogs.com

编缉推荐阅读以下文章

• JavaScript CSS修改学习第四章：透明度设置
• JavaScript CSS修改学习第三章：修改样式表
• JavaScript CSS修改学习第二章：样式
• JavaScript CSS修改学习第一章：查找位置
• JavaScript CSS Style属性对照表