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

最新推荐文章于 2024-07-12 15:49:20 发布

会飞的可乐

最新推荐文章于 2024-07-12 15:49:20 发布

阅读量3.8k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/Bradleyk/article/details/78666060

版权

JS 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

原因：问题不是由于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" ......>')

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

会飞的可乐

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

原生input标签实现ajax单文件上传和多文件上传

dengyilang123的博客

09-01

950

自己还是一个菜鸟的时候，有次项目经理让我用Java做一个多文件上传的功能。那时候技术学得很渣，最多只能够实现单文件上传。做了一个星期都没有做出来，于是项目经理不留半点情面，当着办公室所有人的面痛批我一顿，让我颜面扫地，当时我对了他一句我大不了辞职嘛。那是我的悲伤记忆，最终和上级领导沟通半天后，确定留下来继续干。经历一些事情后，一个人总是要成长的，我也一样。如果那个简单的功能都做不出来，那...

PHP实现带进度条的Ajax文件上传功能示例

10-16

在HTML部分，我们创建了一个简单的表单，包含一个`<input type="file">`元素，当用户选择文件后，会触发`onchange`事件，调用`selfile()`函数。同时，我们定义了一个CSS样式，用于显示进度条。 ```html <input type...

参与评论您还未登录，请先登录后发表或查看评论

使用input file上传文件中onChange事件只触发一次问题（实用，赞）

chelen_jak的专栏

04-17

2308

原文出处：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

349

原生input实现el-uplaod功能

解决input file 的onchange事件只生效一次的问题

huiccsu525的博客

05-20

721

文件选择框的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

4577

今天在做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

112

参考学习：第一篇：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

165

标签的书写 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

140

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

由于出于安全考虑，HTML input type file 控件并不允许获取完整路径，只能获取文件名。如果要将选中的文件上传到服务器，可以通过以下步骤实现： 1. 在 HTML 页面中添加一个 input type="file" 控件，用户可以通过该控件选择文件。 2. 使用 JavaScript 监听 input 控件的 onchange 事件，当用户选择文件后，触发该事件。 3. 使用 JavaScript 从 input 控件中获取文件对象，可以使用 FileReader API 对文件进行读取和处理。 4. 将文件对象通过 AJAX 请求发送到服务器端，由 Spring MVC 框架进行处理。以下是一个基本的实现过程： HTML 页面： ```html <form id="upload-form" enctype="multipart/form-data"> <input type="file" id="file-input" name="file"/> <button type="submit">上传</button> </form> ``` JavaScript 代码： ```javascript var fileInput = document.getElementById('file-input'); fileInput.addEventListener('change', function() { var file = fileInput.files[0]; var reader = new FileReader(); reader.onload = function() { // 处理读取到的文件内容 }; reader.readAsText(file); // 以文本方式读取文件内容 }); var form = document.getElementById('upload-form'); form.addEventListener('submit', function(event) { event.preventDefault(); // 阻止表单默认提交行为 var file = fileInput.files[0]; var formData = new FormData(); formData.append('file', file); var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload'); xhr.send(formData); // 发送文件数据到服务器 }); ``` 后端 Spring MVC 控制器： ```java @RequestMapping(value = "/upload", method = RequestMethod.POST) @ResponseBody public String handleFileUpload(@RequestParam("file") MultipartFile file) { // 处理上传的文件 return "File uploaded successfully"; } ``` 在上述代码中，前端使用 JavaScript 监听 input 控件的 onchange 事件，读取选中的文件，并通过 AJAX 请求发送到服务器端。后端 Spring MVC 控制器通过 @RequestParam 注解获取上传的文件，并进行处理。需要注意的是，由于上传文件是一个耗时的操作，建议在服务器端使用异步方式处理。