Biegral Blog

html的自定义文件上传控件

      html中，系统自带的文件上传控件样式经常不能满足业务场景需要，

      系统自带的文件上传存在兼容性问题，在不同的浏览器中显示方式不一样。

      所以需要自定义上传文件控件。

      实现效果：

    

    实现思路：

   1.布局：

   设置一个隐藏的type为file的input控件。设置一个只读的属性为text的input控件。

   这样一个用于触发浏览文件的div。

   2.渲染JS

   点击浏览div时，触发file input的click事件。选择文件后监听file input的onchange事件

   将上传的文件名赋值到只读的text input元素上。

  实现代码：

   html:

 

<div class="treamitem">
                        <label class="label" >战队图标:</label>
                        <input class="treamiteminput browsetreaminput" type="text" id="browsetreaminput"  readonly="readonly