html input type=file change事件异常处理办法

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

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

//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这类选择框的解析不同,造成外观的差异,为了避免,我们可以做统一处理:

解决方法:

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