html中使用input上传文件按钮

很多时候我们使用上传文件使用input,但是为了美观,我们都直接点击头像就可以出现选择框。

这里写出两种解决方案:

  • input隐藏掉,使用jquery来触发input的click事件,但是有个问题就是IE,没有效果。
  • input设置为透明的,浮在文件区域的上方。这里又存在一个问题,那就是IE效果如下图(未透明):

IE中input

这个时候只有点击浏览才可以上传,黑色区域要双击才有效果。最后我参考了新浪的做法,就是 设置一下字体的大小 ,让后效果如下:

IE中input

Done