当前位置：网站首页 > 技术文章 > 正文

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

zhezhongyun 2025-04-24 10:35 10 浏览

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

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

</div>

//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>

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

HTML style type 属性

上一篇：纯CSS实现鼠标悬停提示的方法(CSS小白第三期)
下一篇：HTTP/HTTPS协议基础

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

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

接口测试遇到500报错?别慌，你的头部可能有点问题

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

关于HTML5被简称做H5，你怎么看?（html5缩写）

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?