谷歌前端页面的同一个文件不能上传两次的解决办法

最新推荐文章于 2024-02-28 09:49:40 发布
最新推荐文章于 2024-02-28 09:49:40 发布
阅读量915 收藏
点赞数
分类专栏： Vue+iView爬坑系列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mianyao1004/article/details/99637973
版权

谷歌浏览器，file input出于安全角度，用户异步上传完毕文件后选择相同文件时，不会触发onChange函数，因此再次上传相同的文件时会失败。

解决方案：在上传失败或上传成功的回调中将 input type=file的value清除

bdlaxx
关注
专栏目录
人工智能_大模型018_Ubuntu/Centos本地安装_ScreenShotToCode根据设计图_截图生成前端Vue/React/Bootstrap页面_001---人工智能工作笔记0154
添柴程序猿的专栏
03-15 265
真的很难安装,这个uuid怎么都装不上,换了3个机器了,租用的也不行,然后本地的吧,网络又不好,安装poetry都装不上.注册了谷歌账号以后,然后再用这个账号去登录,然后再去,注册openai的账号,然后再说。这个邮箱主要是用来注册,已经被限制了,需要用谷歌邮箱最好是,自己想办法去搞吧很麻烦。怎么都不行,在本地网络不行,只能找服务器了.用autodl中的租用的服务器试试把.看来必须要使用,验证码平台去,使用一个国外的比如印度的手机号去注册了.如果网络不好就安装不成功,那么这个时候,你可以去试试不同的源吧,
做多文件/图片上传应该注意的几个前后端问题
irokay的专栏
03-13 2418
最近在做微信端的文件上传，遇到了几个问题，折腾完后这里统一总结下，希望对其他人能有点帮助。 我前端未使用其他上传组件，用的原生的HTML、JS、CSS。 废话不多说，直接罗列你可能关心的点： 前端： 1.html自带file控件样式丑陋，如何达到UI设计要求效果； 2.选择图片后，按照一定的样式回显示图片如何实现； 3.无刷新提交； 4.form序列化无法提交二进制文件（这里是针...
解决谷歌浏览器重复上传同一文件失败的问题
北辰
05-22 1114
问题描述：谷歌浏览器，file input出于安全角度，用户异步上传完毕文件后选择相同文件时，不会触发onChange函数，因此再次上传相同的文件时会失败。 解决方法：每次上传文件成功之后，将input里面的值置为"" e.value=""; ...
谷歌浏览器及谷歌内核相关浏览器input上传重复文件不执行的问题
苦夏木禾
10-12 402
谷歌浏览器及谷歌内核相关浏览器input上传重复文件不执行的问题
同一个文件二次上传无效问题
最新发布
姗姗的博客
02-28 477
显现：文件第一次上传后，修改文件内容后，不刷新页面，再次上传该文件，就出现如下图所示的错误。（刷新页面可以正常上传，换成另一个文件也可正常上传）原因：前后两次的文件名并没有发生改变，没有触发input的onchange的事件。提示报错：net::ERR_UPLOAD_FILE_CHANGED。解决：在接口回调里将input的value置空即可。这样就可以完美解决啦！
jquery 文件上传 触发两次_input file实现多次上传文件（不会覆盖上次上传的文件）...
weixin_42509624的博客
02-01 1338
html原生的file多选控件：存在问题：第一次选择了n个文件，第二次选中m个文件，第二次选择结束之后，第一次选择的文件会被覆盖掉。导致上传的内容不包含最后一次之前选择的文件。解决方案：1.用一个div作为选择文件的触发节点：2.给uploaderBox绑定点击事件：点击div动态添加file控件(隐藏)，给file控件绑定change事件(预览操作等)，模拟file控件点击事件触发选择文件操作。...
【前端性能优化】 --- 一次总结明白
qq_53061847的博客
08-01 825
一次Http请求通常包含很多工作，如记录日志、ip过滤、查询字符串、请求体解析、Cookie处理、权限验证、参数验证、异常处理等，但对于Web应用而言，并不希望接触到这么多细节性的处理，因此引入中间件来简化和隔离这些基础设施与业务逻辑之间的细节，让我们能够关注在业务的开发上，以达到提升开发效率的目的。页面的展示主体是文章展示，如果文章展示的请求靠后了，那么渲染文章出来的时间必然靠后，因为有可能因为请求阻塞等情况，影响请求响应情况，如果超过一次并发的情况的话，会更加的慢。与3.2的分包不同。...
5 分钟撸一个前端性能监控工具
weixin_45396666的博客
08-16 512
简单而言，有三点原因： 关注性能是工程师的本性 + 本分； 页面性能对用户体验而言十分关键。每次重构对页面性能的提升，仅靠工程师开发设备的测试数据是没有说服力的，需要有大量的真实数据用于验证； 资源挂了、加载出现异常，不能总靠用户投诉才后知后觉，需要主动报警。 一次性能重构，在千兆网速和万元设备的条件下，页面加载时间的提升可能只有 0.1%，但是这样的数（土）据（豪）不具备代表性。网络环境...
前端页面优化：如何更快速将你的页面展示给用户？
tzllxya的博客
05-28 1661
前端页面优化：如何更快速将你的页面展示给用户？ 现在许多公司往往注重后端优化，而忽略了前端优化想想如果辛苦优化了服务器，后台，排查了sql，却在最后页面加载展示的时候很慢，也得不偿失其实，前后台优化都是相辅相成的 后台优化好了，响应请求速度快，前台展示的更迅速，前台优化了不必要的请求，后台压力也会更小。 请求优化 首先我们来优化HTTP请求数 由于用户浏览的，往往只是局部网页， 所以...
后台系统上传文件回显上传进度条
weixin_33759269的博客
09-22 971
2019独角兽企业重金招聘Python工程师标准>>> ...
解决不能连续上传/导入同一个文件
HL_xzf的博客
09-28 360
1、angularjs老版本： html <div id="inputfile"> <input type="file" id="file" name="file" style="display: none;" multiple required onchange="angular.element(this).scope().changeFile(this)"/> </div> js $("#inputfile").empty(); $("#i
解决input type=“file“上传同名文件第二次无效问题
九段刀客的博客
02-03 857
event.srcElement.value = null;
清空input=file的value
天道酬勤
10-10 1768
使用form的reset即可 document.getElementById('form1').reset();
前端vue项目中上传文件时无法上传与上一次相同的文件，使用el-upload解决方法
Z_Joker_J的博客
06-05 3364
需求是：上传文件 前提是：上传文件的接口IP是不固定的。因此不能写死。 第一次解决方法： 使用h5自带的input type=file时，使用change触发上传事件 <input class="exportss" type="file" id="fileExport" @change="handleFileChange" ref="inputer"> const inputDOM = this.$refs.inputer this.file = inputDO
input type=file 同一个文件做两次上传操作，第二次无效解决方法
你好，欢迎光临！
11-04 7430
问题 使用input[type=file] 实现文件上传功能，通过onchange事件触发js代码，这个时候第一次上传是完全没问题的，当你第二次上传文件时，如果是不同于上一次上传文件的话是可以正常上传的，不过如果你选择的还是上一个文件，也就是两次上传的文件重复了，那么就会上传失败。 原因 input是通过onchange事件来触发js代码的，由于两次文件是重复的，所以这个时候onchange事件是没有触发到的。 最佳解决方案 读取文件后，记得把input的value重新设置为空即e.target.value
js文件上传以及js清空input file值
热门推荐
兰亭古墨
03-16 5万+
最近项目中遇到文件上传的案例, 之前涉及文件上传的较少, 今天针对js文件上传的案例做一个详细的教程,方便日后查阅! 本教程从 原生JS, jQuery, 两处着手简单介绍文件上传案例 1、原生JS   var test= document.getElementById('test'); var formData = new FormData(); formData.append('...
上传文件成功之后清空 input file的值
weixin_33973609的博客
05-25 3410
2019独角兽企业重金招聘Python工程师标准>>> ...
input file实现多次上传文件（不会覆盖上次上传的文件）
weixin_30929195的博客
11-23 2339
html原生的file多选控件：<input class="className" type="file" name="name" accept="image/*" multiple /> 存在问题：第一次选择了n个文件，第二次选中m个文件，第二次选择结束之后，第一次选择的文件会被覆盖掉。导致上传的内容不包含最后一次之前选择的文件。 解决方案： 1.用一个div作为选择文件的触发节...
chrome 谷歌浏览器”上传“文件、图片按钮点击无响应
m0_67265919的博客
03-08 3331
解决方案： 设置-----隐私设置和安全性-----网站设置-----内容----- 弹出式窗口和重定向（设置成允许） 重启浏览器问题解决。
前端页面可以上传谷歌网盘的素材怎么实现
06-10
要实现前端页面上传谷歌网盘的素材，需要进行以下步骤： 1. 在谷歌开发者控制台中创建一个项目，并启用Google Drive API。 2. 在API凭据中创建OAuth 2.0客户端ID，并将重定向URI设置为您的网站的URL，以便在用户授权时重定向回来。 3. 在前端页面中使用JavaScript编写代码，实现用户选择要上传的文件，并获取用户授权。 4. 使用Google API客户端库将文件上传到谷歌网盘。 以下是一个简单的示例代码，用于上传文件到谷歌网盘： ```javascript // 定义谷歌API客户端库的加载函数 function loadClient() { gapi.client.load('drive', 'v3', () => { console.log('Google Drive API loaded'); }, (err) => { console.error('Error loading Google Drive API', err); }); } // 定义函数，用于选择文件并上传到谷歌网盘 function uploadFile() { // 选择文件 const fileInput = document.getElementById('file-input'); const file = fileInput.files[0]; // 创建文件的元数据 const metadata = { name: file.name, mimeType: file.type }; // 创建Blob对象，用于文件上传 const reader = new FileReader(); reader.readAsBinaryString(file); reader.onload = (event) => { const fileContent = event.target.result; const blob = new Blob([fileContent], {type: file.type}); // 上传文件到谷歌网盘 const accessToken = gapi.auth.getToken().access_token; const xhr = new XMLHttpRequest(); xhr.open('POST', 'https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart'); xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken); xhr.setRequestHeader('Content-Type', 'multipart/related; boundary=foo_bar_baz'); xhr.onload = () => { console.log('File uploaded to Google Drive'); }; xhr.onerror = (err) => { console.error('Error uploading file to Google Drive', err); }; const body = ` --foo_bar_baz\r Content-Type: application/json; charset=UTF-8\r \r ${JSON.stringify(metadata)}\r --foo_bar_baz\r Content-Type: ${file.type}\r \r ${blob}\r --foo_bar_baz--`; xhr.send(body); }; } // 初始化谷歌API客户端库 gapi.load('client', loadClient); ``` 在上面的代码中，`loadClient()`函数用于加载谷歌API客户端库，`uploadFile()`函数用于选择文件并上传到谷歌网盘。注意，需要在前端页面中引入Google API客户端库的JavaScript文件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值