上传文件 后清空file

最新推荐文章于 2021-09-02 16:03:16 发布
最新推荐文章于 2021-09-02 16:03:16 发布
阅读量2.2k 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42310995/article/details/84298603
版权

王小宾

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) 编辑 收藏

刷新评论刷新页面返回顶部

注册用户登录后才能发表评论，请 登录 或 注册，访问网站首页。

【推荐】超50万VC++源码: 大型组态工控、电力仿真CAD与GIS源码库！
【活动】华为云普惠季 1折秒杀 狂欢继续
【工具】SpreadJS纯前端表格控件，可嵌入应用开发的在线Excel
【腾讯云】拼团福利，AMD云服务器8元/月

qcloud

 

常用链接

最新随笔

我的标签

随笔分类(28)

随笔档案(35)

最新评论

阅读排行榜

评论排行榜

推荐排行榜

Copyright ©2018 王小宾

man047
关注
layui-upload文件上传后清空以上传的文件跟选择文件后清空上一次选择的文件
江西DJ烟仔的博客
05-26 1万+
其实很简单的,只是看到网上没有能用的解决方法,所以把代码贴一下,希望能帮助有需要的同志 解决思路就是在回方法 choose 中 通过 UPLOAD_FILES = obj.pushFile(); 将它的返回值用一个变量存起来, 在文件上传成后把UPLOAD_FILES 这个变量里的文件全部删除, 因为我找了一下 layui 的文件上传好像没有提供可以获取所有文件的api方法, 只能通过这种方式...
JS 清空文件上传域 input 'file'
gruhgd的博客
02-02 438
JS 清空文件上传域 input 'file'
JS 清空文件上传域 input='file'
ruilin521314
07-14 198
清空file文件上传域问题.HEMP　ＭＥ 把file文件上传域清空 <mce:script type="text/javascript"><!-- function cls(){ myfile.select(); document.execCommand("delete"); } // --></mce:script> ...
input file选择文件上传后清空选择框文件信息两种解决方案
陌子曦的专栏
04-23 1万+
上传文件时,选择了文件后想清空文件路径。用两种方法解决  第一种: var obj = document.getElementById('fileupload') ; obj.select(); document.selection.clear(); 第二种：  var obj = document.getElementById('fileupload') ; obj.outerHT
清空上传控件HtmlInputFile的方法
weixin_34198583的博客
07-26 92
清空上传控件（<input type="file"/>）值的方法方法：创建一个新的form，把上传控件临时放过来，再调用这个form的reset方法，完工之后再把上传控件弄回去。这个form无需进入DOM结构便能正常工作，所以不用担心会对界面有任影响。下面给出函数实现，经过验证工作良好，呵呵。 //清空文件上传框function clearFileInput(file){    ...
表单内容清空
Helios32的博客
03-23 214
例如： 表单部分 <form id="user"> <input onclick="reset" type="button" values="重置"> </form> 脚本部分 <script> function reset(){ document.getElementById("user").reset() } &...
将input file的选择的文件清空的两种解决方案
09-04
在网页表单中，`<input type="file">`元素用于让用户选择本地文件进行上传。在某些场景下，用户可能需要清空已选择的文件，例如在错误选择或需要重新选择文件时。本文将详细解释两种不同的方法来实现这一功能。 ###...
element-ui 上传图片后清空图片显示的实例
10-18
在这个示例中，当文件上传完成后，handleChange方法会被调用，此时可以执行一些业务逻辑（例如向服务器发起请求），然后通过调用this.$refs.upload.clearFiles()来清空已经上传的文件列表，达到清空图片显示的目的。...
清空上传控件input file的值
12-03
然而，有时我们需要在用户选择文件后或者在特定条件下清空这个控件的值，以便用户可以重新选择文件。在给定的描述中，提供了一个JavaScript代码片段来实现这个功能。接下来，我们将详细解释这个代码的工作原理以及...
清空file的两种方法
a363722188的专栏
08-08 1774
上传文件时,选择了文件后想清空文件路径，搜索了一下，用两种方法解决 复制代码 代码如下: 第一种: 复制代码 代码如下: var obj = document.getElementById('fileupload') ; obj.select(); document.selection.clear(); 第二种： 复制代码 代码如下:
如何清空IE下file文件控件表单里面的值
weixin_30399871的博客
08-08 127
在IE下由于安全的策略，没法通过$(":file").val('')来清空里面上传的值。那我们只能通过克隆节点的方法来实现清空。 如下： var file = $(":file"); file.after(file.clone().val("")); file.remove();这样就可以清空里面的值了。 转载于:https://www.cnblogs.com/violinxliu/p/3...
文件上传中文件类型控制及清空办法
phdbrianlee的专栏
08-17 1857
 在JS中是FileUpLoad对象，具体应参考JavaScript方法。1. 如何调整点击浏览按钮后文件选择对话框中可选择文件类型?        在WEB页面中，基于HTML无法对上传框进行文件类型的限制。虽然存在accept这个属性,但感觉没有什么用。它设置不了。你只能在用户提交之前，根据你允许上传的文件后缀名和用户所选择的文件进行对比，不允许用户继续上传，但不能提前限制用户不能选择
input file详细介绍、更改css样式、获取图片地址、彻底清空上传文件（建议收藏）
AC_Surprise的博客
09-02 1万+
介绍 input 全部类型 input 框的类型到底有多少种呢，零零散散算下来有二十多种 总述 常用的并且能为大多数浏览器所识别的类型大概有：text、password、number、button、reset、submit、hidden、radio、checkbox、file、image、color、range、date、month、week、time、datetime-local。 另外还有一些类型：tel、email、url、datetime、search。这些类型部分浏览器不支持识别或校验。 text
自定义file样式
HELLO WORLD
10-03 725
自定义file样式方法有很多，比如我们可以使用UI框架或者引入专门优化表单控件的插件。 但是如果只是需要处理一个file，而不需要其他，那么引入UI框架或者插件都有点太大材小用了，以下提供一个简单而又使用的解决方案： 示例效果 方案一 解析 使用一个div包着一个file，给div加一个背景；设置file的透明度为0，我们点击的时候，其实是促发了透明的file 示例代码 <div c...
js文件上传以及js清空input file值
热门推荐
兰亭古墨
03-16 5万+
最近项目中遇到文件上传的案例, 之前涉及文件上传的较少, 今天针对js文件上传的案例做一个详细的教程,方便日后查阅! 本教程从 原生JS, jQuery, 两处着手简单介绍文件上传案例 1、原生JS   var test= document.getElementById('test'); var formData = new FormData(); formData.append('...
input清空上传文件的内容
风如也的博客
07-17 4763
首先使用的是普通文件上传框，自己修改了默认样式 <el-form-item label ="上传文档：" prop="filePath"> <input type="file" class="fl" id="batchImport" ref="batchImport" :accept="accept" name="batchImport" style="display: none;" @change="showWord($event)"/> <button id="up.
FormData(file类型文件)
small_cutey的博客
03-18 1万+
有的时候我们上传图片时，后台要求是file类型，我们可以借助FormData，以这种方式上传的，后台接收到的 window.files = self.files[0]; if(window.files){ var form = new FormData(); // var fileVal=$("#file").files[0]; form.append('pic', window.fil...
form表单上传附件的几种方法
听海的博客
06-20 4万+
问题描述：在网页开发过程中，当需要上传附件（图片，音频，视频等）时，常规方法是使用form表单进行提交，这里总结一下form表单提交的几种方法 （form、FormData、ajaxSubmit）
form表单上传文件注意事项
清水
02-02 1913
form 表单提交文件时必须设置 enctype ==multipart/form-data
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值