input 上传图片 change 事件失效

最新推荐文章于 2024-09-27 11:19:05 发布
最新推荐文章于 2024-09-27 11:19:05 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq50347110/article/details/89848006
版权

在做h5端上传图片的时候,  发现删除图片再上传的时候  input  change事件只触发一次, 为什么呢?

因为input的change 事件是根据vaule值变化来的.  所以删除图片的时候把对应input 框的vaule 值清空即可;

网上别人也说了其他方案   方案1:  jq中用 live 绑定change事件,  但是1.9版本以后不支持live了 

方案2:  删除的时候 把input 框销毁 再重新动态生成一个, $('#inputFileID').replaceWith('<input name="fileToUpload" type="file" id="inputFileID"  />'),   可行, 但是比较麻烦;

最佳方案 还是把input 的值清空

 

qq50347110
关注
专栏目录
安卓微信浏览器使用input file图片上传无法触发change事件
“明明很开心”的博客空间
04-01 2405
问题现象 项目中遇到一个上传图片的功能，使用了file作为选择上传，需要做图片预览等功能。在多方测试后没有问题，但在安卓微信浏览器中却发现change事件失效无法触发。 解决办法 由于在项目中我是用来上传图片，所以用了accept进行图片的类型限制，如下： <input required="required" type="file" accept="image/png,image/jpeg,...
input框type=file上传文件的时候不触发change事件的问题
空空壹的博客
07-27 1860
今天上传文件遇到了传图片的时候连续选择同一张图片不会触发change事件的问题，去网上搜了一下比较容易的方法是吧 file的值清空 然后试了以下方法： html： <input type="file" id="file_new_item" name="file_new_item"> 第一种解决方法： $("#file_new_item").val(''); 在chrome上试了一下，这样就行了可以触发change事件了，虽然type=file不能修改值 但是可以赋值空 然而我们.
使用input type 实现图片和文件上传IOS拍照无法触发change事件
最新发布
gvfduy的博客
09-27 411
需要注意的是在流程结束的时候需要增加input.removeEventListener(‘change’,changeInput)和input.value=“”。这两段代码是为了方式选择的图片不可重复和图片堆积导致频繁触发change事件。应用场景：这是一个公共方法，所有的图片上传功能都需要调用这个方法，该方法在安卓设备上没问题，ios设备上拍照上传照片不触发不了change方法。还有一点图片上传如果需要传到数据库的话需要使用图片压缩工具，先对图片进行压缩，否则传输量太大可能导致传输失败。
input多图片上传change事件失效
YYpawn的博客
05-07 478
页面如下: <input type="file" id="imgone" class="input_flie" ref="file" multiple> js部分: $("#imgone").change(function(e){ var files = this.files; if (files.length>3) { ale...
file上传表单 input 的change事件失效的问题
qq1078116634的博客
04-16 863
问题：在使用file 上传表单时，当删除照片后再次上传此照片时 ，会发现无法触发change 事件。 原因：file 表单上传控件的change 事件时通过input 的value 值的变化来变化的。 解决方法：所以当进行删除照片操作的同时，除了清空img 的dom相关元素 还应该清空file 的value值，这样才能保证在上传同一张照片时能再出触发change 事件 jqeury清除表单value值： $("[type='file']").val(' ') ...
INPUT[type=file]的change事件不触发问题
weixin_34405332的博客
08-07 2033
在网页上要操作文件通常会使用INPUT[type=file]控件，但这个控件的设计很蛋疼。它不像其它编程语言中文件选择后会触发一个事件，只是让上面的文字改变，而这个改变可能会触发change事件而已。对于文字没改变的选择，change事件则不会触发。　　当INPUT[type=file]控件上已经选择过一次文件之后，再次点击它选择同一个文件时change事件就不会触发。因为第二次选择后里面的文字和...
input change事件 连续上传两张图片无法触发change事件
易之晓的博客
06-20 1249
showimg (e) { let reader = new FileReader() var file = document.querySelector('#uploadImg').files// 获取图片文件，得到的是一个数组（因为可以同时选择多张图片）（图片文件存储在input标签中的files属性中） reader.readAsDataURL(file...
vue - 解决input上传文件选择同一文件时change事件不会触发的问题
qq_43886365的博客
09-06 4978
js - 解决使用input上传文件选择同一文件时change事件不会触发的问题
解决angularJS中input标签的ng-change事件无效问题
10-18
总结来说，`ng-change`在`<input type="file">`中的失效主要是因为浏览器的安全策略。通过结合原生的`onchange`事件和手动调用`$apply()`，我们可以绕过这个问题并实现类似的功能。在AngularJS开发中，理解每个指令...
jQuery不兼容input的change事件问题解决过程
10-25
在JavaScript和jQuery的世界里，`change`事件是一个非常常见的事件，它通常用于监听表单元素（如`<input>`）的值何时发生改变。然而，不同的浏览器对`change`事件的处理方式可能存在差异，尤其是在一些旧版本的...
radio的change事件失效
m0_52813455的博客
05-12 1486
应该绑定ifChecked事件 $("input[name='radioName']").on('ifChecked', function(event){ test(); });
Layui中change事件不生效
雾林小妖的博客
05-02 879
Layui中通过jQuery为select下拉框绑定change事件不生效
input标签上传文件时无法重复触发change事件
qq_39232672的博客
11-21 811
通过<input type="file">进行文件上传时，通常会选用onchange事件监听文件上传情况。 但是有时候会发现，明明选择了文件，却没有触发onchange绑定的函数。 原因： input上传文件的特性：如果上传了相同的文件，不重复出发onchange事件 解决方法： 通过e.target.value，给该input的value属性赋空：每次事件触发之后，就立即赋空。相当...
关于jQuery中给input赋值，手动触发它的change事件却没反应的问题
weixin_43165220的博客
06-16 4734
我在js文件中，通过$(parent.frames[“commonViewContent”].contentDocument).find("[name=‘inputName’]");拿到了我要赋值的input。 var $commonViewContent=$(parent.frames["commonViewContent"].contentDocument); var $input = $commonViewContent.find("[name='inputName']"); $input.val(v
Safari上 input 无法触发trigger change事件
glacier12的博客
03-09 3607
做上传文件的功能，Safari上不能执行成功， 经过多方寻找，原来是   加了隐藏，只要把这个input 显示出来就可以执行。加了个样式就解决了。
input上传文件选择同一文件时change事件不生效解决方法
Haines
10-13 804
在文件上传的时候我们我们选择监控change事件来获取文件，发现如果第一次如果选择了A文件，当再次点开选择A 文件时，change事件没有触发，这时可以用如下方式处理. vue项目处理方式： this.$refs.inputer.value=null; 复制该代码到项目中，并且把uploadExcelId换成自己input的ref即可。普通js处理方式： event.target.value=”; 尽量不要用删除dom元素，再添加这种操作方式，因为还需要在做事件绑定比较麻烦。 ...
h5在ios 中选中的文件无法获取的原因
weixin_45430932的博客
03-16 1383
如果是自己写的input file 类型的表单，在ios 中 不能直接在内存中生成这个表单，在内存中直接生成的input 表单 ios 不能直接触发input的change事件，所以是没有效果的。 解决： const input = dcoumnet.createElement("input") // 在内存中创建一个input的元素 input.type = "file" // 将类型设置为...
使用input实现上传图片
qq_41587763的博客
06-22 3965
因为时间缘故(就是懒),所以有些在data里定义的值没有写出来，少值得可以直接评论，我会一一给的。 html片段: <div class="upload-img"> <ul class="upload-lists"> <li v-for="(item, index) in picLists" :key="index"> <img :src="item" ..
input change事件选择相同文件不生效
zhaoq6的博客
06-17 1260
input change选择相同文件不生效 场景描述 <input type="file" style="" ref="fileBtn" name="" id="choose_local" @change="handlechangeGetLocalfile(node,$event)" /> 项目需要使用input上传文件，选用change事件触发上传文件，当两次选择相同文件的时候发现change事件没有触发 解决方法 选择相同文件不生效，因此上传完成后把input的value值置空，具体代
el-input 使用 type = number 后 input事件失效
07-28
对于 `<el-input>` 组件，当你将 `type` 属性设置为 `number` 时，确实会导致 `input` 事件失效。这是因为 `input` 事件在输入类型为数字时不会触发。 如果你想要监听输入框中的值变化，可以考虑使用 `change` 事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值