使用input file 通过ajax 上传文件中onChange事件只触发一次问题

最新推荐文章于 2024-07-12 15:49:20 发布
最新推荐文章于 2024-07-12 15:49:20 发布
阅读量3.8k 收藏 1
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bradleyk/article/details/78666060
版权

原因：问题不是由于change事件失效所引起的，而真正的罪魁祸首是ajaxFileUpload插件而造成的，因为它会把原来的file元素重新替换成新的file元素，因此之前绑定的change事件就失效了。

解决办法：上传完文件后，重新绑定change事件，以下是两种常用方法。

方法一：使用jQuery的live代替change:

$('#upload').live('change',function(){

//do upload

})

备注：直接使用$('#upload').change(function(){   })方式无效

方法二：onChange后，生成一个新的file 替代旧的：

$('#upload').replaceWith('<input name="upload" type="file" ......>')

会飞的可乐
关注
专栏目录
原生input标签实现ajax单文件上传和多文件上传
dengyilang123的博客
09-01 951
自己还是一个菜鸟的时候，有次项目经理让我用Java做一个多文件上传的功能。那时候技术学得很渣，最多只能够实现单文件上传。做了一个星期都没有做出来，于是项目经理不留半点情面，当着办公室所有人的面痛批我一顿，让我颜面扫地，当时我对了他一句我大不了辞职嘛。那是我的悲伤记忆，最终和上级领导沟通半天后，确定留下来继续干。经历一些事情后，一个人总是要成长的，我也一样。如果那个简单的功能都做不出来，那...
PHP实现带进度条的Ajax文件上传功能示例
10-16
在HTML部分，我们创建了一个简单的表单，包含一个`<input type="file">`元素，当用户选择文件后，会触发`onchange`事件，调用`selfile()`函数。同时，我们定义了一个CSS样式，用于显示进度条。 ```html <input type...
使用input file上传文件中onChange事件只触发一次问题 （实用，赞）
chelen_jak的专栏
04-17 2314
原文出处：https://www.cnblogs.com/wind-dk/p/9046123.html 每次上传文件的时候，都会将当前的文件路径保存至$event.target.value中，当第二次选择文件时，由于两次$event.target.value相同，所以不会触发change事件。 解决方案为：在input绑定的change方法中，将当前的$event.target.value置空...
关于ajaxFileUpload造成 input[type=file] change事件只能触发一次的问题
https://syra-ti.icu
08-18 2050
现在发现的问题 通过js绑定的input[type=file] change事件只能触发一次 原因 该问题并不是由change事件失效造成的，而是ajaxFileUpload插件造成的，它会把原来的file元素替换成新的file元素，所以之前绑定的change事件就失效了，需要重新绑定一下 除了重新绑定以外，如果是使用$fileInput.trigger('click') 方式，失效原...
原生input实现文件上传
最新发布
m0_50666077的博客
07-12 390
原生input实现el-uplaod功能
解决input file 的onchange事件只生效一次的问题
huiccsu525的博客
05-20 723
文件选择框的onchange事件只在第一次改变时生效，以后再选择文件不会触发onchange事件。     当我们用如下代码： $("#fileToUpload").change(function(){        //do someing    }) 第一次选择文件动作完成后，再次对些file控件进行文件选取操作时，onchange失效，解决办法如下： $("#fileToUpl...
input onchange 事件只执行一次的解决方法（获取图片url添加追加到图片列表）
wbj16116的博客
04-13 1671
（用普通方法，中能获取一次onchange事件，不能连续添加 图片 ） （input type=”file” name=”file” id=”Album_img” accept=”image/gif,image/jpeg,image/x-png”/） $('body').on('change','#Album_img',function(){ var formDat...
为什么Jquery对input file控件的onchange事件只生效一次
tyasd
04-07 4578
今天在做jquery对input file控件的onchange事件进行监听，就一直只生效一次，不知道Jquery为什么对file控件没有做到每次改变触发onchange事件的效果，但是还是有好几种解决方法的：     1.原始方法：把事件写在file控件的onchange=""里面；     2.Jquery方法一: $('#fileId').live('change',function()
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
10-16
在文件上传的同时，可以使用`window.URL.createObjectURL(file)`创建一个临时的URL来预览文件内容，例如图片。然后，通过动态创建`<img>`标签并设置其`src`属性，可以在页面上显示预览。 7. **服务器端处理**： ...
读取input:file的路径并显示本地图片的方法
09-05
在网页开发中，`<input type="file">` 是一个常见的文件上传控件，它允许用户选择本地的文件，如图片。然而，由于安全原因，现代浏览器并不直接提供所选文件的完整路径，而是返回一个相对安全的文件名或者一个沙箱内...
html+ajax实现上传大文件功能
10-19
// 第一次上传时没有文件，就创建文件，此后上传只需要把数据追加到此文件中 if (!file_exists($filename)) { move_uploaded_file($_FILES['video']['tmp_name'], $filename); } else { file_put_contents($...
使用$.ajaxFileUpload上传时<input type="file">设置的onchange只能执行一次的解决方案
qq_22933035的博客
12-04 1711
今天在写图片上传的时候突然发现的onchange事件总是只能执行一次，也就是说只能上传一次，而第二次点击上传的时候onchange这个事件就不会触发了。仔细找了找解决方案，据说是因为$.ajaxFileUpload每次上传的时候会把给替换了，所以绑定的onchange事件就失效了，解决办法是重新绑定事件。         亲自试了下，发现可以用。一下是我的代码         html:
使用ajaxFileUpload过程file控件只触发一次change事件最简单的解决办法
爪哇程序猿
03-14 680
file控件只触发一次change事件，无法触发第二次。 给file控件同时绑定change跟propertychange事件# 注意：只绑定其中一种都不能实现 $(function(){ $("body").on("change propertychange","input[type='file']",function(){ $.ajaxFileUpload( o...
jQuery插件之ajaxFileUpload(异步上传图片并实时显示，并解决onchange后ajaxFileUpload失效问题)...
weixin_30432007的博客
01-11 113
参考学习： 第一篇：http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 第二篇：http://www.jb51.net/article/50518.htm 第三篇：http://zhangzhaoaaa.iteye.com/blog/2200065 第四篇：http://blog.sina.com.cn/s/bl...
ajax 定义input标签的onchang事件 一级innerhtml显示等
weixin_45113252的博客
06-01 167
标签的书写 Javascript
jQuery 文件上传插件ajaxFileUpload使用以及onchange问题
程序员
09-18 1274
今天用了ajaxFileUpload文件上传的一个插件，开始提示$ is not a function,这个是jQuery没引入，秒解决。 突然又来$.ajaxFileUpload is not a function，有点懵逼了，顺序也是正确的，没有发现任何问题。 后面紧接着还有一个提示$(...).live is not a function，这个函数是$.ajaxFileUpload里
springboot ajax 文件上传 后台 无法接收文件（input通过ajax 上传文件 外边套 form表单 上传失败）
qq_37322924的博客
08-12 556
尝试使用springboot 上传文件 怎么比对 都没有问题 但是后台就是接不到数据 先查看 network 参数传递情况 （没看懂 瞎看觉得可能请求错了的问题）userfile 是我请求的路径 结果是useradd 有文件的数据 出现取不到数据的原因是 我外边套了form <form id="form1" onsubmit="return false" action="##" method="post"> <input class="btn btn-primar...
Ajax 之文件上传
weixin_33863087的博客
06-03 142
FormData 简单的上传例子 /* 先在 html 里面准便好 <input class="file-input" tpye="file" /> 标签 */ var fileInput = document.querySelector('.file-input'); var formData = new FormData(); //添加 formData 上传文件 fil...
使用Ajax时上传文件的问题
jjhua的专栏
01-04 1179
在一般的文件上传页面，只需要注意form处加上 enctype="multipart/form-data"，表示表单上所有信息以流的方式提交就可以了在button1中通过HttpPostedFile hp = Request.Files["topicupfile"];方式获取到上传文件信息。 但当页面用到ajax时，同样的设置确无法获取正确信息，Request.Files["topicupfil
html input type file 选中文件后 如何获取文件完整路径 让springmvc框架控制端获取
06-10
在上述代码中，前端使用 JavaScript 监听 input 控件的 onchange 事件，读取选中的文件，并通过 AJAX 请求发送到服务器端。后端 Spring MVC 控制器通过 @RequestParam 注解获取上传的文件，并进行处理。需要注意的是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值