<input type="file"> change事件异常处理办法

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

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

 

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

 

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