隐藏file控件，用button实现文件上传

为什么80%的码农都做不了架构师？>>>   

<input type="file">控件不是很美观，很多时候可能更希望用button去代替它实现文件上传

一种方法是用button覆盖file原本的浏览按钮，不足是得精确控制位置和大小，文本框还在

另一种是设置成透明，然后用button叠在上面，同样需要控制位置和大小

还有一种是设置display：none，然后用button间接触发file控件的click，但是这种方式不支持Chrome

查看文档时，刚好看到了visibility属性，我想就是它了，马上测试，果然OK

<button type="button" onclick="upfile.click()">上传文件</button>
<input type="file" id="upfile" onchange="uploadFile()" style="visibility: hidden; position: absolute;">

将file控件设置成hidden后，它依然占据文档空间，于是用absolute让其脱离文档流

这样就可以完全隐藏了，而且Chrome也可以支持了

但是IE就不能支持了，IE下必须主动点击input type=file（label的for触发也可以），间接触发的都会提示“拒绝访问”

转载于:https://my.oschina.net/seast/blog/113959