zoukankan      html  css  js  c++  java
  • <input type="file"> change事件异常处理办法

    问题:最近发现一个奇怪的bug,

      那就是在上传图片需要采用input type=file来进行文件选择.由于为了适应美工的UI图,所以是把选择文件的input框隐藏了.然后通过另外一个按钮的点击事件来触发input的选择事件.代码如下:

      <div style="120px;height:120px">
        <img src="/image/uploadfile.png" style="100%;height:100%" id="uploadImg">
      </div>

      <input type="file" style="display:none" 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 style="120px;height:120px;position:relative">
        <img src="/image/uploadfile.png" style="100%;height:100%" id="uploadImg">
        <input type="file" style="display:none;position:absolute;100%;height:100%;top:0;left:0;z-index:1000;opacity:0" id="chooseFile">
      </div>

    改成上述代码后,每次点击占位图,实际上点击的是chooseFile这个元素,从而直接进行文件选择.页无需用任何trigger事件.

  • 相关阅读:
    go语言实现拉取矿币最新价格等信息
    MySQL 8 主从搭建
    小米11ULTRA偷渡开发版+刷MAGISK+EDXPOSED
    常见插值算法--拉格朗日插值、三次卷积插值、三次样条插值、兰克索斯插值
    Effective Python Ver2.0_StudyNotes_纯属性与修饰器取代旧式的setter与getter方法
    Effective Python Ver2.0_StudyNotes_使用类体系去解决多层嵌套问题
    c# 异步调用 利用委托异步调用
    redis设计与实现-读书笔记
    springboot揭秘-读书笔记
    redis深度历险-读书笔记
  • 原文地址:https://www.cnblogs.com/Ricky-Huang/p/5655591.html
Copyright © 2011-2022 走看看