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

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

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

其实刚开始是百思不得其解的，最后想了一下，应该是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. Jquery点击数字切换图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Servlet 的生命周期 及 注意事项 总结

    Servlet的生命周期 图解Servlet的生命周期 生命周期的各个阶段 实例化 :Servlet 容器创建 Servlet 的实例 初始化 :该容器调用init() 方法 请求处理 :如果请求Se ...

  3. java基础面试题：写clone()方法时，通常都有一行代码，是什么？

    clone()方法 与new constructor()构造器创建对象不同 是克隆一个新的对象 package com.swift; public class Clone_Test { public ...

  4. 【算法】Fibonacci（斐波那契数列）相关问题

    一.列出Fibonacci数列的前N个数 using System; using System.Collections.Generic; using System.Linq; using System ...

  5. 如何查看连接到手机热点的ip地址

    因为最近玩树莓派,需要手机做热点,然后用树莓派连接到这个热点上,苦于不知道树莓派被分配了什么样的ip地址,经过一番探索,我发现了两种办法, 安装一个 android terminal( 安卓命令行), ...

  6. wamp mysql服务意外停止

    出现问题: MySQL启动一段时间之后,意外停止.可以再次启动,但是过不了多久又自动停止了. 发现问题: 查看错误日志,发现以下问题: 解决方案: 网上网友分享以下操作: 1.删除data文件夹里面的 ...

  7. 浅谈JavaScript字符串拼接

    本文给大家汇总介绍了几种javascript中字符串拼接的方法,十分的简单实用,有需要的小伙伴可以参考下. 在JavaScript中会经常遇到字符串拼接,但是如果要拼接的字符串过长就比较麻烦了. 如果 ...

  8. awk截取指定字段

    #!/bin/bash #好多地方可以优化,先记录下,便于以后使用 dir="/logs/$1"file="/logs/$1/requests.log"if [ ...

  9. window.onload和$(docunment).ready的区别

    浏览器加载完DOM后,会通过javascript为DOM元素添加事件,在javascript中,通常使用window.onload()方法. 在jquery中,则使用$(document).ready ...

  10. 精读《sqorn 源码》

    1 引言 前端精读<手写 SQL 编译器系列> 介绍了如何利用 SQL 生成语法树,而还有一些库的作用是根据语法树生成 SQL 语句. 除此之外,还有一种库,是根据编程语言生成 SQL.s ...