html的自定义文件上传控件

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" />                        <input class="hide" id="treamitemFile" type="file"  />                        <div class="browsetreamwrap" id="selectHeadimg">                            <div class="browsetreambtn">浏览</div>                        </div>                    </div>

   JS:

function createTreamModule(){    //战队头像上传    $('#selectHeadimg').click(function() {        $('#treamitemFile').click(); // 模拟文件上传按钮点击操作    });    //选择文件后将文件名显示    $('#treamitemFile').change(function () {        $('#browsetreaminput').val($(this).val());    });}