上传文件 后清空file
王小宾
Nothing Is Impossible!
- 博客园
- 首页
- 新随笔
- 联系
- 管理
随笔 - 35 文章 - 0 评论 - 8
input type file上传文件之后清空内容。
上次写过如何上传文件，上传成功之后，会出现一些问题。
当我打开上传的文件，但是没有点击上传，然后关闭弹窗，接着继续上传刚才的那个文件。为了满足产品组的要求，我们一般都会把样式进行一定的覆盖。
但这就会出现一定的问题。按照上面说的那种情况，当我再次打开之后覆盖样式的内容为空。
其实刚开始是百思不得其解的，最后想了一下，应该是file文件内容没有清空的原因造成的。
上网查各种清空的方法。
普遍使用较多的就是外部加一个form表单，然后清空form表单里面的内容。
如上图一样，我给input标签外面增加一个form标签，id为videoForm
我们产品需求上传文件是在一个弹框里面的。
所以我每次打开弹框的时候，只需要清空一下该内容就行。
具体代码
document.getElementById('videoForm')&&document.getElementById('videoForm').reset();第二种方法就是
每次提交成功之后的操作。
document.getElementById('').outerHTML= document.getElementById('').outerHTML如果你的才华还实现不了你的野心，那就静下心来，埋头苦干。有志者事竟成破釜成舟百二秦关终属楚，苦心人天不负卧薪尝胆三千越甲可吞吴！
分类: JavaScript
好文要顶 关注我 收藏该文
王小宾
关注 - 0
粉丝 - 8
+加关注
1
0
« 上一篇：vue项目上传文件以及进度条
» 下一篇：element ui form表单清空规则
posted @ 2018-02-12 18:46 王小宾 阅读(2390) 评论(0) 编辑 收藏
注册用户登录后才能发表评论，请 登录 或 注册，访问网站首页。
常用链接
最新随笔
- 1. 五分钟搞懂Vuex
- 2. 实现把多维数组转为一维数组的几种方式
- 3. 设置鼠标右键自定义事件
- 4. JS事件处理程序
- 5. DOM操作的一个小坑
- 6. webpack 引入 html-webpack-plugin 报错
- 7. The 'brew link' step did not complete successfully
- 8. 判断一个数值是否为正数、负数、零、整数。
- 9. Vue 插槽详解
- 10. Vue props父组件向子组件传值详解
我的标签
随笔分类(28)
随笔档案(35)
- 2018年10月 (2)
- 2018年8月 (3)
- 2018年6月 (3)
- 2018年5月 (3)
- 2018年4月 (1)
- 2018年3月 (5)
- 2018年2月 (4)
- 2018年1月 (3)
- 2017年12月 (4)
- 2017年9月 (1)
- 2017年7月 (6)
最新评论
- 1. Re:Vue 插槽详解
- 问个问题：四、作用域插槽 {{a}} ......
- --s_p
- 2. Re:vue项目中使用vue-awesome
- vue awesome 演示
- --2926143939
- 3. Re:五分钟搞懂Vuex
- 感谢分享
- --一步一步向上爬
- 4. Re:五分钟搞懂Vuex
- 写的不错，此文章还是需要对vuex有一定了解，这样更好理解！
- --霍艳庆
- 5. Re:五分钟搞懂Vuex
- mark
- --Ace001
阅读排行榜
- 1. vue项目中使用阿里iconfont图标(10632)
- 2. 微信小程序底部弹框动画(8595)
- 3. element ui form表单清空规则(3683)
- 4. vue项目--favicon设置以及动态修改favicon(3276)
- 5. Vue 插槽详解(2885)
评论排行榜
推荐排行榜
- 1. 五分钟搞懂Vuex(4)
- 2. vue项目中使用阿里iconfont图标(2)
- 3. input type file上传文件之后清空内容。(1)
- 4. Vue 插槽详解(1)
- 5. javaScript构造函数、原型、面向对象编程(1)
上传文件 后清空file相关推荐
- vue文件上传成功后清空文件
在项目中我们使用input标签设置type属性为file,上传文件后需要清空选中的文件, <input type="file" ref="clearFile&quo ...
- Spring MVC上传文件后重命名读取不显示，报错已解决(The origin server did not find a current representation for the targe)
上传文件后,重命名保存在本地,再读取时报错:The origin server did not find a current representation for the target resourc ...
- vue+elementui 同时有上传文件和批量上传文件功能，上传文件或批量上传文件后必须刷新才能再次上传文件
报错描述: 使用element-ui的上传文件组件写一个批量上传和上传文件,但是发现每次上传文件后或者批量上传文件后,不能再次上传文件或者批量上传文件.只有进入页面第一次点击上传文件或者批量上传文件才 ...
- 文件服务器异常 选择签名,OSS上传文件后，服务器签名验证失败
关于 OSS上传文件后,服务器签名验证失败的搜索结果 回答 指定该Header后,在响应头中也会返回该Header,OSS会对上传的Object进行加密编码存储,当这个Object被下载时,响应头中会 ...
- vue3+ts+vite+elementPlus实现文件上传导入excle给后端，并且清空上传文件后的列表，以及formData变成[object FormData]的解决方法
一.文件上传 1.首先我们文件上传的方法用到的是multipart/form-data,它是基于post方法来传递数据的,需求是实现类似与这样的:来一个弹框实现两个excel的文件导入 2.用vue的 ...
- 华为服务器上传文件后怎么通过链接查看,远程服务器文件上传后的操作
远程服务器文件上传后的操作 内容精选 换一换 本节指导您基于Linux操作系统环境完成镜像文件快速导入,推荐使用云平台的EulerOS云服务器作为转换镜像格式和生成位表文件的环境.Linux操作系统环 ...
- jquery-form中ajaxSubmit提交文件，以及解决ie9下上传文件后自动下载问题
需要引用jquery-form.js 下载地址http://plugins.jquery.com/form/ 1.之前的项目一直使用formData的方式上传文件到后台处理,但新项目要求支持ie9,i ...
- ajaxFileUpload上传文件后提示下载的问题
在某些版本浏览器下ajaxFileUpload上传文件会提示下载, 1:为什么? 可以观察到,即便返回 JsonResult 在返回的头中也没有任何消息体,直接理解为文本了. 2:解决方案 前端: f ...
- php上传文件后定时删除,PHP根据条件定时删除文件代码
这是一个根据文件的创建时间进行判断删除文件的,一般用于文件上传后定时删除文件. 是个很实用的东西(至少对于我来说是这样). 下面开始代码: /* 本文件用法:放到目录,在程序头部添加 include( ...
最新文章
- vs配色方案_提高生产力：配色，模板参数过滤及IntelliCode
- java 发送邮件_老板要实现SpringBoot发送邮件?大神发了这篇文章后,今晚准点下班...
- 「神策 2020 数据驱动用户大会」10 月 13 日即将开幕，5 大亮点提前解锁！
- Git新建临时分支进行开发后合并至master
- url映射 ccf （Java正则表达式80分解法）
- 让人迷茫的三十岁！从专业技能、行业知识和软实力谈一下！
- 机器学习笔记——决策树之分类树
- 剑指offer之链表中倒数第K个节点
- python字体和图片合成
- win10如何关闭自动更新及修改更新时间
- D3D 中LPD3DXSPRITE（点精灵）对图片进行缩放旋转透明处理
- 如何让大中药丸子便于下咽， 2021年3月11日 更新 同样适用于中药粉
- 随机数的生成【详解】
- Android打开相册并上传图片至服务器
- 海思3559U-Boot移植（二）：更换新的SPI Nand Flash
- 台式计算机鼠标型号和价格,力胜鼠标价格和型号汇总【图文】
- independent watchdog 独立看门狗 window watchdog 窗口看门狗
- 前端的核心技术有哪些？
- c++ set unordered_set区别
- 细思极恐，你真的会写java吗？