使用input上传文件 change事件只能执行一次的问题解决

已于 2023-06-06 16:57:28 修改
阅读量596 收藏 1
点赞数 1
文章标签： javascript
于 2023-05-10 17:10:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52510500/article/details/130605084
版权

问题描述：

点击批量上传按钮，选择文件后，弹层正常显示

关闭弹层后，再次选择文件时（由于当时在测试，一直选择的都是同一个文件），input的change事件不执行，弹层也就顺理成章地打开不了

 然后在网上找了一些资料，知道了问题所在。 由于一直选择的是同一个文件，不能够让change事件的event.target.value发生改变，导致选择文件后，不会再次触发change事件

一开始我选择在change事件的回调函数中，对文件的内容进行置空，由于还需要对已上传的文件进行查看，导致获取不到所选择的文件数据，我又重新在关闭弹层的时候，通过ref将内容置空

 

BelieveTom、
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
点击图片触发input是file的事件
07-21
window.createObjectURL 上传图片，实现web预览
解决vue项目中type=”file“ change事件只执行一次的问题
12-29
问题描述 在最近的项目开发中遇到了这样的一个问题，当我上传了一个文件时，我将获取到的文件名清空后，却无法再次上传相同的文件 <template> <div class=hello> <input type=button value=上传文件 name= id= @click=updata> <input type=file style=display:none @change=getFile id=input-file> <div v-if=fileName> <p>上传的文件名：{{fileName}}</p>
解决input标签进行文件上传时不能上传重复文件的问题
最新发布
sinac的博客
05-13 372
使用input[type=file] 实现文件上传功能，通过onchange事件触发js代码，解决不能上传重复文件的问题
input[type=“file“] change事件第二次不触发
weixin_39818813的博客
11-15 3515
问题： 用input上传图片时，如果第二次传递的跟第一次是一样的图片，那么此时会出现：change事件不再触发。 代码： <input type="file" ref="upload" id="imgUrl" @change="uploadChange" accept="image/jpg, image/jpeg, image/png" /> 解析： 首先这种情况是正常的，不是bug，我们可以看到，每次上传的时候input右侧都有一个文件名。那么change事件会根据这个文件名val
input框上传文件，change事件被多次触发，导致上传多次
mufengdeying111的博客
05-11 1793
<input id='file' type='file' name='file' accept='img/*'/> 使用id选择器通过off（‘change’）.on('change',function(){},解绑事件，再重新绑定解决；
解决使用input file change文件上传只执行一次
misMa_anran的博客
09-20 817
解决使用input file change文件上传只执行一次
解决input file change文件上传只执行一次
China_Edc的博客
03-23 895
这样写的。 出现bug的情况是： 当我点开一个上传文件的时候可以正常上传，点开第二个的时候如果是上传相同的东西， 则上传页面什么都不显示。如果换一个文件就可以。 原因可能是因为@change的event没有发生改变，所以没有上传成功，我们需要把file的值清空，操作如下： ...
Vue+element 的上传组件 on-change 只触发一次问题
qq_31452297的博客
11-16 6448
前言： 今天刚好接到一个需求，上传文件到oss 不要手动点击上传按钮，想选择文件就直接上传，然后再文件能上传后发现，再次上传的时候并不会再次触发onchange 方法； 当你再次点击选择文件后，并不会打印； 我网上找了下，有人用v-if组件销毁 创建来解决，我觉得这个并不怎么合适，因为当你直接点击取消的时候捕获不到事件，又看到一个原生用input的来清空值； 结合了一下,这个方法。 通过vue的ref给上传组件，然后再打印内容里面我发现，当你选择了一个文件以后，这个地方就已经存在值了。且没有替
上传文件的input框的change时间只能触发一次的原因
热门推荐
守护大白菜的博客
12-22 1万+
用 ajaxfileupload上传文件没有问题，但是只能触发一次change事件
Input type=“file“ change事件只触发一次
小白白的博客
09-19 323
执行完一次change事件之后清空一下value。
input输入只触发最后一次
YUlangML的博客
09-25 344
【代码】input输入只触发最后一次。
Vue触发input选取文件点击事件操作
10-14
总的来说，Vue.js中的文件上传操作可以通过监听按钮点击事件触发input元素的文件选择对话框，然后通过`FileReader`处理选中的文件。同时，Vue的懒加载机制可以提高大型应用的性能，确保用户只加载他们需要的模块。
js input file多个文件上传功能特效代码
03-20
对于多文件上传，我们需要遍历 `files`，对每个文件执行相应的操作，如预览、上传等： ```javascript for (var i = 0; i ; i++) { var file = files[i]; // 处理每个文件 } ``` 在实际应用中，为了提高用户体验...
java使用ftp上传文件示例分享
09-04
- 使用`storeFile(String filename, InputStream input)`方法将文件内容存入FTP服务器，传入远程文件名和包含文件内容的输入流。 6. **异常处理**：在上传过程中可能会遇到网络问题、权限问题等，因此需要捕获并...
使用Selenium上传文件（在窗口上选择文件）
04-07
为了解决这个问题，有些开发者会使用JavaScript执行上下文来模拟点击文件选择器，然后再通过Selenium输入文件路径。例如，可以使用以下JavaScript代码： ```javascript var input = document.getElementById('...
InputNumber 计数器 连续点击一定时间内只允许执行一次
yangwq的博客
04-03 1580
var timeoutflag = null; ratio(){ var vm=this if(timeoutflag != null){ clearTimeout(timeoutflag); } timeoutflag=setTimeout(function(){ console.log(vm.Num,"ces");//此处是一个...
vue项目中解决type=”file“ change事件只执行一次的问题
weixin_30500105的博客
05-15 518
问题描述 在最近的项目开发中遇到了这样的一个问题，当我上传了一个文件时，我将获取到的文件名清空后，却无法再次上传相同的文件 <template> <div class="hello"> <input type="button" value="上传文件" name="" id="" @click="updata"> <input ...
后面这个上传文件能不能用input的change事件完成
06-06
是的，你可以使用 `input` 元素的 `change` 事件来监听用户选择文件的操作，然后在回调函数中获取文件对象，并执行上传操作。以下是示例代码： HTML 代码： ```html <input type="file" id="inputFile" style="display: none;"> <button onclick="selectFile()">选择文件</button> <button onclick="uploadFile()">上传文件</button> ``` JavaScript 代码： ```javascript function selectFile() { // 获取 input 元素 const inputFile = document.getElementById('inputFile'); // 触发点击事件 inputFile.click(); // 监听 change 事件 inputFile.addEventListener('change', function() { // 获取文件对象 const file = inputFile.files[0]; // 将文件对象保存到全局变量中 window.selectedFile = file; }); } function uploadFile() { // 获取全局变量中保存的文件对象 const file = window.selectedFile; // 如果文件对象不存在，则直接返回 if (!file) { return; } // 创建 FormData 对象 const formData = new FormData(); // 将文件对象添加到 FormData 中 formData.append('file', file); // 创建 XMLHttpRequest 对象 const xhr = new XMLHttpRequest(); // 设置请求方式和 URL xhr.open('POST', '/upload'); // 发送请求 xhr.send(formData); // 监听请求状态变化事件 xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 请求成功 console.log(xhr.responseText); } }; } ``` 以上代码中，我们通过 `addEventListener` 方法为 `input` 元素绑定了 `change` 事件的回调函数，当用户选择文件时，回调函数会被触发，我们在回调函数中获取到了选择的文件对象，并将其保存到全局变量 `window.selectedFile` 中。在上传文件时，我们就可以从全局变量中获取文件对象了，避免了因为异步操作导致的获取不到文件对象的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值