上次写过如何上传文件，上传成功之后，会出现一些问题。

当我打开上传的文件，但是没有点击上传，然后关闭弹窗，接着继续上传刚才的那个文件。为了满足产品组的要求，我们一般都会把样式进行一定的覆盖。

但这就会出现一定的问题。按照上面说的那种情况，当我再次打开之后覆盖样式的内容为空。

其实刚开始是百思不得其解的，最后想了一下，应该是file文件内容没有清空的原因造成的。

上网查各种清空的方法。

普遍使用较多的就是外部加一个form表单，然后清空form表单里面的内容。

如上图一样，我给input标签外面增加一个form标签，id为videoForm

我们产品需求上传文件是在一个弹框里面的。

所以我每次打开弹框的时候，只需要清空一下该内容就行。

具体代码

document.getElementById('videoForm')&&document.getElementById('videoForm').reset();

第二种方法就是

每次提交成功之后的操作。

document.getElementById('').outerHtml = document.getElementById('').outerHtml

input type file上传文件之后清空内容。的更多相关文章

  1. input type=file 上传文件样式美化（转载）

    input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...

  2. HTML <input type="file">上传文件——结合asp.net的一个文件上传示例

    HTML的代码:(关键是要在form里设置enctype="multipart/form-data",这样才能在提交表单时,将文件以二进制流的形式传输到服务器) 一. <fo ...

  3. jquery判断 input type="file"上传文件是否为空

    要想获取type="file"的input内容,用var file = $("id").val();肯定是不行的,下面是代码: html上传按钮为: <i ...

  4. <input type="file">上传文件并添加路径到数据库

    注:这里是用的mvc所以没法用控件 html代码 <form method="post" enctype="multipart/form-data"> ...

  5. input type='file' 上传文件 判断图片的大小是否合格与witdh 和 height 是否合格

    function CheckFiles(obj) { var array = new Array('gif', 'jpeg', 'png', 'jpg'); //可以上传的文件类型 if (obj.v ...

  6. onclick事件触发 input type=“file” 上传文件

    添加按钮: <input type="button" name="button" value="浏览" onclick="j ...

  7. input[type=file]上传文件（格式判断、文件大小、上传成功后操作）

    var isUploadImg = false; //在input file内容改变的时候触发事件******************上传图片 $('#filed').change(function( ...

  8. 使用 input[type=file]上传文件

    var $file = $('#file'); $('#btn').click(function() { var data = new FormData(); data.append('file', ...

  9. input标签type="file"上传文件的css样式

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. SyntaxHighlighter使用方法

    原名:SyntaxHighlighter,是一款用于web页面的代码着色工具,可以用来着色多种语言,可以是HTML,CSS,Javascript,还可以是C,JAVA等编程语言.最早见于Yahoo的Y ...

  2. 认识mysql(3)

    认识mysql第三篇,发出的内容适合初学者,如果能持续关注我的博客,可以全面的掌握mysql的常用知识,后续我也会陆续发出python相关的知识,关注我,和我一共进步吧! 1.SQL查询 1.执行顺序 ...

  3. http 实战练习

    http 实战练习 建立httpd服务器,要求提供两个基于名称的虚拟主机: (1)www.X.com,页面文件目录为/web/vhosts/x:错误日志为/var/log/httpd/x.err,访问 ...

  4. swpan&expect交互脚本

    #!/usr/bin/expectset timeout 30set user USERNAMEset pass PASSWORDspawn sudo pg_dump npi -U admin -p ...

  5. 转 Laravel 的核心 —— 服务容器

    具体内容请参考 1.laravel 学习笔记 —— 神奇的服务容器 - 灵感 - 来自生活的馈赠https://www.insp.top/article/learn-laravel-container ...

  6. 将Excel文件转为csv文件的python脚本

    #!/usr/bin/env python __author__ = "lrtao2010" ''' Excel文件转csv文件脚本 需要将该脚本直接放到要转换的Excel文件同级 ...

  7. (转)RubyGems常用命令

    什么是RubyGems? RubyGems是一个方便而强大的Ruby程序包管理器,Ruby的第三方插件是用gem方式来管理,非常容易发布和共享,一个简单的命令就可以安装上第三方的扩展库.特点:能远程安 ...

  8. Nearest Common Ancestors POJ - 1330 （LCA）

    Nearest Common Ancestors Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 34657   Accept ...

  9. Codeforces Round #456 (Div. 2) A. Tricky Alchemy

    传送门:http://codeforces.com/contest/912/problem/A A. Tricky Alchemy time limit per test1 second memory ...

  10. 大数运算：HDU-1042-N！（附N！位数的计算）

    解题心得: 这里使用了10000进制.很明显,因为是n!所以单个最大的数是10000*10000,使用万进制. 可以借鉴高精度的加法,单个乘了之后在进位. 很坑的一点,0!=1,数学不好WA了三次,尴 ...