input标签处理上传文件时同一个文件上传没反应

最新推荐文章于 2024-05-13 14:45:17 发布
最新推荐文章于 2024-05-13 14:45:17 发布
阅读量769 收藏
点赞数 1
分类专栏： javascript 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44162077/article/details/125409762
版权

谷歌浏览器中input重复上传同一文件时没反应，
上传的文件，路径、名称完全相同，才是同一个文件，上传时连续同一文件点击上传，
谷歌浏览器不会重复加载。

谷歌浏览器中input的onChange事件默认保存上一次input进去的value，同一个value（根据文件路径判断）在重复上传时不重新加载。

解决办法:上传成功后清除input的value值

 this.$refs.input.value = ''
不断学习的码农
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何点击a标签实现弹出input file上传文件对话框
09-28
在网页设计中，有时我们希望用户能够通过点击一个链接（a标签）来触发文件上传功能，而不是使用传统的`<input type="file">`标签。这种交互方式可以使界面更加友好和美观。下面我们将详细介绍如何实现这个功能，涉及...
使用Servlet处理一个上传的文件
08-26
在Servlet端，我们可以使用`doPost()`方法来处理文件上传。传统的做法是使用`getInputStream()`读取整个请求体，然后解析出文件内容。以下是一个简单的示例： ```java @WebServlet("/upload") public class ...
使用input上传文件，不能上传同一个文件的问题
qq_44173499的博客
10-31 434
使用input上传文件，不能上传同一个文件的问题
input file 重复上传同一张图片失效的解决办法
一个女胖子的博客
11-17 9075
项目中遇到上传图片，需要本地预览效果，测试时无意间发现，当选择A图片，然后更换为B图片，完全正常；当选择A图片，取消该图片，再测选择A图片后，发现不会再生成预览效果，出现了bug；查找相关资料后，终于找到了两个解决办法；方法一：来回切换input[type=’file’]的type属性值，可以是‘text’,’button’,’button’….，然后再切换回来‘file’ 方法二：每次取消图
解决input标签进行文件上传时不能上传重复文件的问题
最新发布
sinac的博客
05-13 329
使用input[type=file] 实现文件上传功能，通过onchange事件触发js代码，解决不能上传重复文件的问题
vue input type=file时 组件重复提交同一图片 事件不响应
dec_1的博客
05-09 283
this.$refs.wfuploader.value = null; this.$refs.wfuploader.click(); <input v-else type="file" ref="wfuploader" @change="uploadImg" accept="image/*" v-show="fal...
input文件上传，重复上传同一文件失效
Ajaxguan的博客
04-08 1271
前言：使用input标签file文件上传图片时，第一种上传成功后，选择第二张时上传没有反映。 原因：
关于＜input type=“file“/＞两次上传同一文件不显示
thingir的博客
06-07 338
pc端上传视频，使用input type=file 封装了个组件，但是发现上传一个视频，删除它，然后重新再上传此视频没反应，解决：删除视频时把input value 值置空。
js input上传文件可input上传图片
10-30
本文将深入探讨如何使用JavaScript处理文件上传，特别是针对图片的上传操作。 一、HTML `<input type="file">` 元素 这个元素提供了一个用户界面，允许用户从他们的计算机中选择一个或多个文件。例如： ```html ...
HTML中文件上传时使用的input type=”file”元素的样式自定义
12-14
Web页面中，在需要上传文件时基本都会用到<input type="file">元素，它的默认样式： chrome下： IE下： 不管是上面哪种，样式都比较简单，和很多网页的风格都不太协调。 根据用户的需求，设计风格，改变其...
Vue input: file 上传相同文件没反应， onchnage 不触发，解决办法
12-14 3319
input: file 上传相同文件没反应， onchnage 不触发，解决办法 参考 StackOverflow 中的回答： https://stackoverflow.com/questions/26634616/filereader-upload-same-file-again-not-working 有时候上传文件的时候，如果失败了，再选择这个文件上传，就不会触发上传了。 原因是前后两个文件是一样的，存在 input 中的 files 没有变化，而我们监听的是 onchange ，所以才没有触发
【HTML5】文件上传：input[file]选择相同文件时，不触发onchange事件【解决方案】
源林氏的笔记本
04-19 2009
【解决方案】 1.将Input[file]的value设置为"" 2.如果包裹在form元素里面的，则使用表单的reset函数 3.用新的input元素替换旧input的元素
JavaScript 使用input type=“file“ 无法上传相同文件的问题
buyue
01-04 1662
使用<input type = "file">标签上传文件时，若两次上传的是同一个文件，查看浏览器网络面板发现没有出发网络请求。 【问题原因】 两次上传同一个文件时，的value是一样的，所以不会触发onchagne事件。 【解决方案】 每次上传完成后，将所需信息保存，再将input的value值进行清空。 document.getElementById('the_inputfile').value = ''; 或者重新赋值 var the_inputfile = document.getE
关于input框选择上传文件的时候，上传同一个文件的情况下不触发change事件（简单的一个上传文件通过aiax去请求的组件）----仅做笔记用
weixin_41757599的博客
08-19 787
因为input上传文件设计的原因，在上传同一个文件的时候，他value值一直都是一样的，所以就不会触发change事件，因此要解决这个问题，需要做到的仅仅就是找到对应的type为file的input框，对应得去清空value值就阔以了！！！！ html代码–一个小小的文件上传的组件 <div class="form-group inputFile"> ...
input type=file不能重复上传同一个文件
yan263364的博客
09-23 5403
一、问题 上传文件用的H5：input type=file，事件用的 change； 问题出在，如果上传的第一个文件是 '一站式.txt‘’，之后再上传同一个文件，页面无法显示文件名. 注：文件名是通过 change 事件，获取文件信息后，显示到文本框内的，由于是同一个文件名，没有触发 change 事件。 二、解决 把 input 的 type 类型转变为其他input类型，然后再转成 file...
input type=‘file‘ 上传同一个文件失效，无反应
Crazy_GirlLL的博客
12-01 1307
input type='file' 上传同一个文件失效，无反应 用inputfile上传文件，掉用onchange方法时，多次上传同一个文件时功能失效，不会发送ajax请求 input[type=file]使用的是onchange去做，onchange监听的为input的value值，只有再内容发生改变的时候去触发，而value在上传文件的时候保存的是文件的内容，你只需要在上传成功的回调里面，将当前input的value值置空即可。event.target.value=“”； 设为空之后...
谷歌浏览器及谷歌内核相关浏览器input上传重复文件不执行的问题
苦夏木禾
10-12 384
谷歌浏览器及谷歌内核相关浏览器input上传重复文件不执行的问题
bug：本地预览图片时第二次无法选中同一张图片
A_Common_Man的博客
05-23 261
使用URL.ObjectCreateUrl将图片以url资源存储起来的时候，两次上传同一图片，第二次上传会失败
在vue3中使用input标签上传Excel格式的文件到服务器，请给一个案例
06-08
好的，以下是一个简单的案例，供您参考： 在 Vue3 中，我们可以使用 `ref` 函数来创建一个响应式的变量，然后在模板中绑定 `input` 标签的 `ref` 属性和 `@change` 事件，接着在事件处理函数中获取上传的文件，使用 `FormData` 对象将文件数据和其他表单数据一起发送到服务器。 代码如下： ```html <template> <div> <input type="file" ref="fileInput" @change="onFileChange"/> <button @click="uploadExcel">上传Excel</button> </div> </template> <script> import { ref } from 'vue' export default { setup() { const fileInput = ref(null) const formData = new FormData() const onFileChange = (event) => { const file = event.target.files[0] formData.append('file', file) } const uploadExcel = () => { // 添加其他表单数据 formData.append('username', '张三') formData.append('age', 18) // 发送文件数据和其他表单数据到服务器 fetch('/api/upload', { method: 'POST', body: formData }).then(response => { console.log(response) }) } return { fileInput, onFileChange, uploadExcel } } } </script> ``` 在上面的代码中，我们使用 `ref` 函数创建了一个名为 `fileInput` 的响应式变量，然后在模板中绑定了 `input` 标签的 `ref` 属性和 `@change` 事件，当用户选择文件后，`onFileChange` 函数会被调用，将文件数据保存在 `formData` 对象中。 最后，在 `uploadExcel` 函数中，我们使用 `fetch` 函数发送 `POST` 请求到服务器，将 `formData` 对象作为请求体，同时添加其他需要上传的表单数据。服务器端可以通过解析请求体中的数据，获取上传的文件和其他表单数据。 需要注意的是，上述代码只是一个简单的示例，实际的文件上传过程中还需要考虑文件大小限制、文件类型限制、上传进度显示等问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值