input type=file 上传文件，同一个文件第二次上传无反应

最新推荐文章于 2023-08-25 14:56:45 发布
最新推荐文章于 2023-08-25 14:56:45 发布
阅读量966 收藏 1
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44733660/article/details/107158685
版权

  • 用input file上传文件，掉用onchange方法时，多次上传同一个文件时功能失效，不会发送ajax请求

  • input[type=file]使用的是onchange去做

  • onchange监听的为input的value值，只有再内容发生改变的时候去触发

  • 而value在上传文件的时候保存的是文件的内容，只需要在上传成功的回调里面，将当前input的value值置空即可。

  • event.target.value=""；

  • 设为空之后在次点击就可实现同一文件多次上传操作

whyfail
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
jquery实现多次上传同一张图片
11-26
话不多说，请看代码 $('input[type=file]').wrap('<form>').closest('form').get(0).reset(); wrap():$(‘p’).wrap(‘div’);===><div><p></p></div>; .closest():最接近的列表元素或者其子后代元素 get():$(‘p’).get(0)获得第一个p元素的名称和值，这个方法得到的是dom元素，后面如果你再加jQuery方法的话就会报错
input type="file" 上传文件
chu_geng的博客
05-05 1629
input type="file" 上传文件，显示上传图片，并替换上传按钮的位置 限制上传格式可以用accept=" "，比如accept=".doc,.docx" （限制上传文件为doc/docx）其他的都不可以 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&...
input type=“file”上传文件（一）
Stark6的博客
09-09 1561
使用input标签，type=‘file’的时候就可以上传文件，为input标签添加change事件，调用函数。 <input type="file" @change="uploading"> 之后再函数里创建formdata对象，将文件append到对象中去 uploading(e) { let file = e.target.file[0]; this.b...
input type=file 同一个文件做两次上传操作，第二次无效解决方法
最新发布
qq_43654065的博客
08-25 1190
使用input[type=file] 实现文件上传功能，通过onchange事件触发js代码，这个时候第一次上传是完全没问题的，当你第二次上传文件时，如果是不同于上一次上传文件的话是可以正常上传的，不过如果你选择的还是上一个文件，也就是两次上传的文件重复了，那么就会上传失败。input是通过onchange事件来触发js代码的，由于两次文件是重复的，所以这个时候onchange事件是没有触发到的。读取文件后，记得把input的value重新设置为空即e.target.value=''
解决 input type=file 同一个文件二次上传无效的问题
m0_63873004的博客
04-17 818
input type=file 同一个文件二次上传无效的问题
<input type='file'>选择文件后自动上传文件
蒲公英的约定
05-22 5万+
想要一个选择了文件就自动上传的效果，但之前的 都是写在form表单中来提交的。借助jquery的ajaxfileupload.js，可以这样子弄： 正面： function uploadFile(obj, type) { $.ajaxFileUpload({ url : "http://localhost:8081/ws2/servlet/fileUpload", secur
通过input[type=“file“]上传文件或图片——功能实现
yehaocheng520的博客
06-29 8432
在后台管理系统中，经常会用到图片或者文件的上传。 如果用到的是VUE框架的话，可以通过对应UI框架中的上传组件： 比如：elementUi中的upload上传 还有一种方式就是直接使用input组件，此组件当type="file"时，就是一个上传文件或者图片的控件了。 具体使用方法如下： 1.触发选择文件的html部分 整个页面都是用的elementUi的框架，因此部分组件是用的elementUI中的组件形式，例如下面的按钮组件 <el-button size="mini" type="succes
＜input type=“file“＞实现上传文件
weixin_68067009的博客
07-27 8556
实现上传文件
input type=‘file‘ 前端实现文件上传
weixin_41141811的博客
12-31 816
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文件上传</title> <script src="jquery/jquery-1.11.2.js"></script> </head> <body> <input type="file" name="" id="upfile" value..
input[type="file"]上传文件原理详解
热门推荐
懒虫翻身的博客
07-17 6万+
input[type="file"]上传文件原理详解 最近又搞了一下上传文件功能，用别人的插件不大符合自己要求，还是用HTML5的input[type="file"]比较好控制，现在重新回顾一下使用input[type="file"]上传文件 【1】修改input[type="file"]的样式 我个人感觉input type=file的样式有点丑，还是修改修改 <a type=...
PHP基础教程 是一个比较有价值的PHP新手教程！
04-24
通过我们已经学过的知识，你可以编写一个最简单的程序输出一个也许是程序世界中最有名的词语： echo "Hello World!"; ?> First PHP page // Single line C++ style comment /* printing the message */ ...
大名鼎鼎SWFUpload- Flash+JS 上传
12-19
　SWFUpload是一个客户端文件上传工具，最初由Vinterwebb.se开发，它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统<input type="file" />标签的文件上传模式。 [编辑本段]SWFUpload...
Python核心编程第二版(ok)
05-21
Python核心编程第二版(ok) 第1部分　Python核心 　第1章　欢迎来到Python世界　 　1.1　什么是Python　 　1.2　起源　 　1.3　特点　 　1.3.1　高级　 　1.3.2　面向对象　 　1.3.3　可升级　 　1.3.4　可扩展　 　...
call，apply，bind的区别
why404
02-09 1万+
一、call,apply,bind的相同点： 都是改变this指向的； 第一个参数都是this要指向的对象； 都可以利用后续参数传参； 二、call,apply,bind的区别： call和bind的参数是依次传参，一一对应的； 但apply只有两个参数，第二个参数为数组； call和apply都是对函数进行直接调用，而bind方法返回的仍是一个函数； 例如： var a ={ name:'一一', age:'22', sex:'女', ho.
可用的rtsp、rtmp、http网络直播地址
why404
10-11 6666
可用的rtsp、rtmp、http网络直播地址 tmp://58.200.131.2:1935/livetv/cctv1 cctv1综合 rtmp://58.200.131.2:1935/livetv/cctv2 cctv2财经 rtmp://58.200.131.2:1935/livetv/cctv3 cctv3综艺 rtmp://58.200.131.2:1935/livetv/cctv4 cctv4中文国际 rtmp://58.200.131.2:1935/livetv/cc.
淘宝npm源将在2022年5月31日更换域名服务
why404
02-10 4096
淘宝为了提供更稳定、更安全、更符合国家法律法规要求的镜像服务（说人话就是怕国家找茬所以要低调），将要更换淘宝npm源的服务器，并且老的域名npm.taobao.org 和 registry.npm.taobao.org 将不再使用。 2022年5月31日0时，这两个老域名将会停止服务，截至目前，通过老域名安装npm包已经会被301到新域名 registry.npmmirror.com 淘宝 NPM 镜像站切换新域名啦 1.通过cnpm使用淘宝镜像： npm install -g cnpm --re..
font-family可以设置的字体
why404
04-10 3617
一、小米米官网 font-family: “Arial”,“Microsoft YaHei”,“黑体”,“宋体”,sans-serif; 二、font-family：中文字体的英文名称 宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 MingLiU 标楷体 DFKai-SB 仿宋 FangSong 楷体 KaiTi 仿宋_GB2312 FangSong_GB.
base64转文件流
why404
06-29 1824
base64转文件流 // dataurl:base64 const base64toFile = (dataurl, filename = "file") => { let arr = dataurl.split(","); let mime = arr[0].match(/:(.*?);/)[1]; let suffix = mime.split("/")[1]; let bstr = atob(arr[1]); let n = bstr.length; le
Vite使用vw适配方案
why404
06-17 1302
Vite使用vw的方案，适用于vue、react
在网站主目录中创建三个文件，第一个名字为：index.html，该网页主要提 供用户的注册信息的录入，具体的用户注册表单内容按照实验五的要求完成；第 二个名字为：register.php，该程序完成 index.html 中的数据采集，并对采集到的 数据进行处理（比如：判断用户密码是否有效，成绩是否为 0-100 的正整数等等）， 并实现用户的文件上传功能（注意：该功能必需使用函数编写，该函数在另外一 个 PHP 程序中声明）；第三个名字为：upload.php，该程序主要是对文件上传功 能的实现。
05-23
3. 最后在网站主目录下创建一个名为 `uploads` 的目录，用于保存上传的文件。 至此，三个文件的创建工作已经完成。你可以在浏览器中访问 `index.html` 文件，填写表单数据并上传文件，然后查看 `register.php` 文件...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值