html input type=file change事件异常处理办法
haoteby 2025-05-14 13:32 1 浏览
问题:最近发现一个奇怪的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事件.
相关推荐
- 网站seo该怎么优化
-
一、网站定位在建设一个网站之前，我们首先要做的就是一个网站清晰的定位，会带来转化率相对较高的客户群体，我们建站的目的就是为了营销，只有集中来做某一件事，才会更好的展现我们的网站。在做SEO优化的同时...
- 3个小技巧教你如何做好SEO优化
-
想半路出家做SEO?可是，怎么才做的好呢?关于SEO专业技术弄懂搜索引擎原理，咱们做搜索引擎排名的首先就是要了解搜索引擎的工作原理，对SEO优化有更深入了解之后再来做SEO,你就能从搜索引擎的视点...
- SEO指令分享:filetype指令
-
filetype用于搜索特定的文件格式。百度和谷歌都支持filetype指令。比如搜索filetype：pdf今日头条返回的就是包含今日头条这个关键词的所有pdf文件，如下图：百度只支持：pdf...
- 网站seo优化技巧大全
-
SEO在搜索引擎中对检索结果进行排序，看谁最初是在用户的第一眼中看到的。实际上，这些排名都是通过引擎的内部算法来实现的。例如，百度算法很有名。那么，对百度SEO的优化有哪些小技巧？下面小编就会说下针对...
- 小技巧#10 某些高级的搜索技巧
-
由于某些原因，我的实验场所仅限百度。1.关键词+空格严格说来这个不能算高级，但关键词之间打空格的办法确实好用。我习惯用右手大拇指外侧敲击空格键，这个习惯在打英文报告时尤其频繁。2.site:（请不要忽...
- MYSQL数据库权限与安全
-
权限与安全数据库的权限和数据库的安全是息息相关的，不当的权限设置可能会导致各种各样的安全隐患，操作系统的某些设置也会对MySQL的安全造成影响。1、权限系统的工作原理...
- WPF样式
-
UniformGrid容器<UniformGridColumns="3"Rows="3"><Button/>...
- MySQL学到什么程度?才有可以在简历上写精通
-
前言如今互联网行业用的最多就是MySQL，然而对于高级Web面试者，尤其对于寻找30k下工作的求职者，很多MySQL相关知识点基本都会涉及，如果面试中，你的相关知识答的模糊和不切要点，基...
- jquery的事件名称和命名空间的方法
-
我们先看一些代码：当然，我们也可以用bind进行事件绑定。我们看到上面的代码，我们可以在事件后面，以点号，加我们的名字，就是事件命名空间。所谓事件命名空间，就是事件类型后面以点语法附加一个别名，以便引...
- c#，委托与事件，发布订阅模型，观察者模式
-
什么是事件？事件（Event）基本上说是一个用户操作，如按键、点击、鼠标移动等等，或者是一些提示信息，如系统生成的通知。应用程序需要在事件发生时响应事件。通过委托使用事件事件在类中声明且生成，且通过...
- 前端分享-原生Popover已经支持
-
传统网页弹窗开发需要自己处理z-index层级冲突、编写点击外部关闭的逻辑、管理多个弹窗的堆叠顺序。核心优势对比：...
- Axure 8.0 综合帖——新增细节内容
-
一、钢笔工具与PS或者AI中的钢笔工具一样的用法。同样有手柄和锚点，如果终点和起点没有接合在一起，只要双击鼠标左键即可完成绘画。画出来的是矢量图，可以理解为新的元件。不建议通过这个工具来画ICON图等...
- PostgreSQL技术内幕28:触发器实现原理
-
0.简介在PostgreSQL（简称PG）数据库中，触发器（Trigger）能够在特定的数据库数据变化事件（如插入、更新、删除等）或数据库事件（DDL）发生时自动执行预定义的操作。触发器的实现原理涉及...
- UWP开发入门(十七)--判断设备类型及响应VirtualKey
-
蜀黍我做的工作跟IM软件有关，UWP同时会跑在电脑和手机上。电脑和手机的使用习惯不尽一致，通常我倾向于根据窗口尺寸来进行布局的变化，但是特定的操作习惯是依赖于设备类型，而不是屏幕尺寸的，比如聊天窗口的...