inputtype=filechange事件异常处理办法
问题：最近发现⼀个奇怪的bug,
  那就是在上传图⽚需要采⽤input type=file来进⾏⽂件选择.由于为了适应美⼯的UI图，所以是把选择⽂件的input框隐藏了.然后通过另外⼀个按钮的点击事件来触发input的选择事件.代码如下:
  <div >
    <img src="/image/uploadfile.png" id="uploadImg">
  </div>
  <input type="file" id="chooseFile">
    //js部分，点击占位图进⾏⽂件选择
  $('#uploadImg').on('click',function(){
    $('#chooseFile').trigger('click');
    $('#chooseFile').on('change',function(){
        //这⾥要实现图⽚预览,⼀种⽅法是先发送给后台，再由后台将图⽚的url返回.另⼀种⽅法是使⽤插件.具体代码就不展⽰了
        //假设我们使⽤向后台发送的⽅法，这⾥假定responseImgUrl是后台返回的图⽚url
      $('#uploadImg').attr('src',responseImgUrl)//实现预览
    })
  })
如上代码所述，在chrome浏览器第⼀次进⾏图⽚选择是毫⽆问题的，可以成功预览，但是第⼆次选择⽂件的时候,change事件就仿佛失效了，需要多点击⼏次才能成功选择图⽚,⼀旦我有多张图需要上传的话，会出现点击很多次才能选择到⼀次
图⽚⽂件的问题,
也就是说，需要点击多次uploadImg这个元素才能触发⼀次chooseFile这个元素的change事件.真是太蛋疼了.⽹上看到有的⽹友说可能是由于浏览器对display=none的⽂件选择框进⾏特殊处理.
于是我⼜把chooseFile的display=none给注释掉了，结果没有什么变化.在多次尝试之后，成功到解决⽅法,
那就是不⽤trigger⽅法去触发chooseFile的⽂件的点击事件，直接点击chooseFile进⾏⽂件选择即可.
当然，不同浏览器对input type=file这类选择框的解析不同，造成外观的差异，为了避免，我们可以做统⼀处理:
解决⽅法:
  <div >
    <img src="/image/uploadfile.png" id="uploadImg">
inputtypefile样式    <input type="file"
id="chooseFile">
  </div>
改成上述代码后，每次点击占位图，实际上点击的是chooseFile这个元素，从⽽直接进⾏⽂件选择.页⽆需⽤任何trigger事件.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。