文件上传input框无法多次上传 onchang方法不生效

最新推荐文章于 2022-09-22 17:28:00 发布
最新推荐文章于 2022-09-22 17:28:00 发布
阅读量385 收藏
点赞数
分类专栏： 文件上传
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42780601/article/details/98847530
版权
本文介绍了一个关于文件上传的问题解决方案：当上传第一个文件后，后续上传无法触发后台方法。通过替换原有的文件上传input并重新绑定onchange事件，可以有效解决此问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目前做文件上传时遇到一个问题,上传完第一个文件候再上传文件无法触发文件上传的后台方法
例
在这里插入图片描述
在这里插入图片描述
每次上传完文件之后替换掉原来的文件上传的input,然后重写一下文件上传框的onchange方法便解决了

vue element el-input 搜索功能实现防抖 @input事件请求频繁
King Saj
02-23 2028
效果 不要使用el-input的@input事件，使用这个事件，使用防抖无效 代码: <template> <div> <el-input type="number" v-model="form.batchNumber" placeholder="请输入批次" /> </div> </template> <script> export default { data() { return {
HarmonyOS系统应用开发基础入门
最新发布
Crowd_chips的博客
07-08 1415
ArkUI基础入门知识点
基于HTML5的多张图片上传
weixin_30268921的博客
03-03 315
图片上传之前也有写过demo，不过是单张上传的，最近有个业务需求是需要多张上传的，于是乎从新改写了一下 HTML结构： <div class="container"> <label>请选择一个图像文件：</label> <input type="file" id="file_input" multiple/> </...
input文件上传第二次上传失败
qq_46222892的博客
09-22 657
上传成功之后设置input的类型为其他任何一个，然后再将类型设置为file就可以啦，我一开始使用的是将value置为空，但是对我没有效果，我的上传是这么写的，跟我写的一样的可以试一下。记得在页面关闭的时候清除定时器。
解决input type=“file“上传同名文件第二次无效问题
九段刀客的博客
02-03 900
event.srcElement.value = null;
同一个文件二次上传无效问题解决方案（转）
FavoriteStudent的博客
06-01 3525
input[type=file]使用的时onchange去做，onchange监听的为input的value值，只有在内容发生改变的时候去触发，而value在上传文件的时候保存的是文件的内容，因此我们再上传成功的回调里面，将当前的input的value值置空即可。document.getElementById('myInput').value = ''...
添加上传图片，input不能多次上传的问题
m0_59678206的博客
09-18 211
jquery解决input file控件中的onchange上传文件仅一次的bug
u013594477的专栏
08-10 1874
在功能区管理系统中，在上传区域网格、道路交通、以及功能区类型的xls文件时，好像所有的文件仅可以上传一次，如果下次修改了文件内容，除非刷新网页，否则上传的文件并没有生效。因此这是一个bug,在网上找了好多解决方案，最终得以成功突破。。...
谷歌浏览器中input重复上传同一文件时上传失败bug
莉兹Liz的博客
04-17 849
问题解剖 首先说一下上传的文件，路径、名称完全相同，才是同一个文件； 上传时连续点击上传； 谷歌浏览器不会重复加载。 直到这里都不算bug，只是防止重复上传时重复加载的问题，下面接着看： 关闭弹窗后打开下一条数据的弹窗，上传同一文件，也不会重新加载，打印value发现value不清空。这样同一文件连续上传就会一直为空一直不能上传。产生bug。 问题产生原因 谷歌浏览器中input的onChang...
【踩坑记】记录 input 上传文件夹 change 事件失效的问题
Wonder233的学习博客
08-07 1193
问题 在 vue 里使用 input[type=file] ： <button size="small" type="weak" title="选择文件夹" @click="$refs.directoryInput.click()">选择文件夹</button> <input ref="directoryInput" type="file" multiple="multiple" webkitdirectory="webkitdirectory" style="display:
安卓版微信 input onchange事件不生效
nabywe的博客
01-15 6557
做Vue 图片上传控件，遇到无法上传的问题，表现未选择图片后无法触发change事，问题原因最终锁定在input accept上。 上面的定义，在某些安卓版微信上不会触发change事件，需要改成下面形式 困扰了很久
vue elementui el-upload组件 input type=file坑重新选择同一文件时不再显示
weixin_34176694的博客
09-26 6109
2019独角兽企业重金招聘Python工程师标准>>> ...
input框type=file上传文件的时候不触发change事件的问题
空空壹的博客
07-27 1987
今天上传文件遇到了传图片的时候连续选择同一张图片不会触发change事件的问题，去网上搜了一下比较容易的方法是吧 file的值清空 然后试了以下方法： html： <input type="file" id="file_new_item" name="file_new_item"> 第一种解决方法： $("#file_new_item").val(''); 在chrome上试了一下，这样就行了可以触发change事件了，虽然type=file不能修改值 但是可以赋值空 然而我们.
前端H5实现多图片上传并预览
qq_31182399的博客
10-15 863
利用input 的type='file" 可以实现文件的上传，不过只支持单个文件上传。只有给input加上multiple属性才能实现多个文件同时上传。 <div class="input-file-box"> <span>点击上传图片</span> <input type="file" name="" id="uploadfile" multiple> </div> <div id="img-box"></div> j
HTML5的 input:file上传类型控制
菜鸡日常记录
05-19 7670
一、input:file属性 属性值有以下几个比较常用： accept：表示可以选择的文件MIME类型，多个MIME类型用英文逗号分开，常用的MIME类型见下表。 multiple：是否可以选择多个文件，多个文件时其value值为第一个文件的虚拟路径。 1、accept 只能选择png和gif图片 <input id="fileId1" type="file" accept="image/png,image/gif" name="file" /> 2、multiple 多文件上
html只允许上传xlsx,input file限制上传文件类型的方法
weixin_32021519的博客
06-05 6318
在前端html中，上传文件时，一般都是用到 type 属性值为 file 的 input 标签，但在默认情况下，file 类型的 input 标签是不限制选择本地文件的类型的，那么本篇博文，飞鸟慕鱼就来和大家说一说，input file 如何限制本地文件的类型。input file 代码默认情况下，input file标签 选择本地文件时，是不受限制的，可以选择压缩包类型文件，文本类型文件，图片类...
input标签 各属性解释
热门推荐
chao430的博客
03-22 4万+
input标签最全面的type属性   (2016-08-21 23:56:07) 转载▼ 标签：  type   属性   input   分类： HTML标签 由于时间关系，在上一节中只是简单的列举了input标签中的type属性，在本节中就详细地来运用input标签中的type属性。 因为以
如何使用input.Type=‘file‘拿到文件对象
zz_LXW的博客
12-23 4033
在页面中添加 <input type="file" style="display: none" ref="input" @input="upload" > 在需要上传文件的地方增加 <button @click="$refs.input.click()"> 上传文件 </button> 在method中增加 upload(){ let files = this.$refs.input.files[0] console.log(files)//文件.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值