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

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

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

其实刚开始是百思不得其解的，最后想了一下，应该是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. 国产中标麒麟Linux部署dotnet core 环境并运行项目 （三） 部署运行WEB API项目

    部署dotnet Core Web API 上一步的文章,是我们公司最核心的一个ORM组件,在中标麒麟系统完成了一个插入数据的任务,这一步是将正式的从dot net framework 迁移到 dot ...

  2. 零基础快速入门SpringBoot2.0教程 （四）

    一.JMS介绍和使用场景及基础编程模型 简介:讲解什么是小写队列,JMS的基础知识和使用场景 1.什么是JMS: Java消息服务(Java Message Service),Java平台中关于面向消 ...

  3. response.setContentType("text/html;charset=utf-8")后依然乱码的解决方法

    从浏览器获取数据到服务器,服务器将得到数据再显示在浏览器上英文字母正常显示,中文字符乱码的问题,已经使用了 response.setContentType("text/html;charse ...

  4. linux系统串口编程实例

    在嵌入式开发中一些设备如WiFi.蓝牙......都会通过串口进行主机与从机间通信,串口一般以每次1bit位进行传输,效率相对慢. 在linux系统下串口的编程有如下几个步骤,最主要的是串口初始化! ...

  5. 【点分树】codechef Yet Another Tree Problem

    已经连咕了好几天博客了:比较经典的题目 题目大意 给出一个 N 个点的树和$K_i$, 求每个点到其他所有点距离中第 $K_i$ 小的数值. 题目分析 做法一:点分树上$\log^3$ 首先暴力做法: ...

  6. 【思维题 最大权闭合子图】loj#6045. 「雅礼集训 2017 Day8」价

    又是经典模型的好题目 题目描述 人类智慧之神 zhangzj 最近有点胖,所以要减肥,他买了 NN 种减肥药,发现每种减肥药使用了若干种药材,总共正好有 NN 种不同的药材. 经过他的人脑实验,他发现 ...

  7. 日期增加天数--JS Date

    //日期加天数的方法 //dataStr日期字符串 //dayCount 要增加的天数 //return 增加n天后的日期字符串 function dateAddDays(dataStr,dayCou ...

  8. Java中的finally

    基础用法: int f1() { try{ return 1; }finally { System.out.println("finall执行"); } } @Test publi ...

  9. 在Ubuntu下配置jdk+maven

    1.在官网上下载对应Linux版本的jdk 2.在终端输入命令将下载好的jdk解压并且转移到指定的路径如:首先执行 tar -zxvf jdk-8u181-linux-x64.tar.gz    然后 ...

  10. 用scala的actor并发编程写一个单机版的WorldCount

    前言:最近一段时间比较忙,也是比较懒了吧,好长时间没写博客了,新的一年到来,给自己一个小目标,博客坚持写下去,分享一下这历程!废话不多说,开始正题咯(希望大家喜欢!) 首先这算是一个scala程序的入 ...