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事件.

  • 相关阅读:
    IOS 11 通讯录手机号「隐形字符」的 Bug
    本地添加const参数 防止短信接口恶意调用
    javascript阿拉伯数字 转 汉字中文数字
    js去掉数组的空字符串
    Chrome 清除某个特定网站下的缓存
    vue-cli中的babel配置文件.babelrc详解
    提交到github报错Please tell me who you are
    跨域问题
    js单线程、js任务队列、异步操作
    Java 异常
  • 原文地址:https://www.cnblogs.com/Ricky-Huang/p/5655591.html
Copyright © 2011-2022 走看看