修改<input type="file">的外观

Question

我想实现以下功能点一个漂亮按钮
     |
出现Brows对话框
     |
选择要上传的文件
     |
   上传
<input type="file" id="file">的默认外观太丑了，
于是我将他隐藏，然后做了个漂亮按钮，onClick时，调用file.click()出现Brows对话框，
可是选中的文件不能上传。网易邮箱已经实现了这个功能，请问有人知道该怎么做？

Answer 1

样式在调下<input id=a size=20><input type=button value=选择文件 style="width:100;background-color:red" >
<div style="position:absolute;top:15;left:-80;width:150;filter:alpha(opacity=0)" >
<input type="file" onpropertychange="a.value=this.value" size=33></div>

Answer 2

这个是ie安全问题，应该不是用file.click()解决楼主用css美化不行吗

Answer 3

看来，只有hbhbhbhbhb1021的办法了
网易邮箱的也是这么做的吗？

Answer 4

1.指定用一个容器。
容器最好指定高和宽，并且overflow为hidden，不是块级元素的最好设display为block（为了高和宽的正确呈现）；
2.在容器里放一个file控件，并设置样式，使能触发弹出选择文件框的部分覆盖整个容器，并设置成全透明。
容器指定准确的高和宽就是为了能通过file控件中不多的能设置的样式来覆盖整个容器；
3.现在已经把容器模拟成file控件了，可以直接设置容器的样式来模拟设置file控件的样式了。具体参考这里的file样式部分

Answer 5

准备条件:
页面添加一个iframe如uploadIframe,该iframe隐藏,指向一个新页面(该页面中form表单和file按钮都是你要上传文件要用的,该file的id假如为myFile.注意设置好form类型,action地址)。
你页面的漂亮按钮.
做法:你漂亮按钮定义onclick事件.事件内容为:
                        
                        uploadIframe.forms[0].myFile.click();
if(uploadIframe.forms[0].myFile.value.length != 0) {
uploadIframe.forms[0].submit();
}
看明白思路就行 only ie,别的没测过.

Answer 6

flash组件