如何用JS清空上传控件input(type=file)

var obj=网页中的<input type="file" />
obj.outerhtml = obj.outerhtml.replace(/(value=").+"/i, "$1"");

更经典的方法

需要清空<input type="file">的值,但上传控件<input type="file">的值不能通过网页特效来修改。

google找到这样一个解决方法:

   在上传控件中插入了值,就只能通过form的reset功能来清空了,但是form里面其他的值也被reset了。

   既然可以使用form的reset清空,那就有办法了:新建一个临时form,然后将需要清空的上传控件移入其中,reset之后,再移回原来所在位置,最后删除创建的临时form。网页特效代码:

 

网页特效代码
var upload = {   
clear: function(id){   
var up = (typeof id=="string")?document.getelementbyid(id):id;   
if (typeof up != "object") return null;   
var tt = document.createelement("span");   
tt.id = "__tt__";   
up.parentnode.insertbefore(tt,up);   
var tf = document.createelement("form");   
tf.appendchild(up);   
document.getelementsbytagname("body")[0].appendchild(tf);   
tf.reset();   
tt.parentnode.insertbefore(up,tt);   
tt.parentnode.removechild(tt);   
tt = null;   
tf.parentnode.removechild(tf);   
},   
  
clearform: function(){   
var inputs,frm;   
if (arguments.length == 0)   
{   
inputs = document.getelementsbytagname("input");   
}else{   
frm = (typeof arguments[0] == "string")?document.getelementbyid(arguments[0]):arguments[0];   
if (typeof frm != "object") return null;   
inputs = frm.getelementsbytagname("input");   
}   
  
var fs=[];   
for ( var i=0; i<inputs.length; i++ )   
{   
if (inputs[i].type == "file") fs[fs.length] = inputs[i];   
}   
  
var tf = document.createelement("form");   
for ( var i=0; i<fs.length; i++ )   
{   
var tt = document.createelement("span");   
tt.id = "__tt__" + i;   
fs[i].parentnode.insertbefore(tt, fs[i]);   
tf.appendchild(fs[i]);   
}   
document.getelementsbytagname("body")[0].appendchild(tf);   
tf.reset();   
for ( var i=0; i<fs.length; i++)   
{   
var tt = document.getelementbyid("__tt__" + i);   
tt.parentnode.insertbefore(fs[i],tt);   
tt.parentnode.removechild(tt);   
}   
tf.parentnode.removechild(tf);   
}   
}   

var upload = {  clear: function(id){  var up = (typeof id=="string")?document.getelementbyid(id):id;  if (typeof up != "object") return null;  var tt = document.createelement("span");  tt.id = "__tt__";  up.parentnode.insertbefore(tt,up);  var tf = document.createelement("form");  tf.appendchild(up);  document.getelementsbytagname("body")[0].appendchild(tf);  tf.reset();  tt.parentnode.insertbefore(up,tt);  tt.parentnode.removechild(tt);  tt = null;  tf.parentnode.removechild(tf);  },   clearform: function(){  var inputs,frm;  if (arguments.length == 0)  {  inputs = document.getelementsbytagname("input");  }else{  frm = (typeof arguments[0] == "string")?document.getelementbyid(arguments[0]):arguments[0];  if (typeof frm != "object") return null;  inputs = frm.getelementsbytagname("input");  }   var fs=[];  for ( var i=0; i<inputs.length; i++ )  {  if (inputs[i].type == "file") fs[fs.length] = inputs[i];  }   var tf = document.createelement("form");  for ( var i=0; i<fs.length; i++ )  {  var tt = document.createelement("span");  tt.id = "__tt__" + i;  fs[i].parentnode.insertbefore(tt, fs[i]);  tf.appendchild(fs[i]);  }  document.getelementsbytagname("body")[0].appendchild(tf);  tf.reset();  for ( var i=0; i<fs.length; i++)  {  var tt = document.getelementbyid("__tt__" + i);  tt.parentnode.insertbefore(fs[i],tt);  tt.parentnode.removechild(tt);  }  tf.parentnode.removechild(tf);  }  }

这个方法使用示例:

 

html代码
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<title>test</title>   
<script type="text/网页特效">   
<!--引入以上js代码--></script>   
</head>   
  
<body>   
<form name="testform"  method="post">   
<input type="file" name="testfile" />   
<input type="button" value="clear" onclick="upload.clear('testfile')" /><br />   
<input type="button" value="clearall" onclick="upload.clearform()" /><br />   
<input type="submit" value="submit" /><input type="reset" value="reset" />   
</form>   
</body>   
</html> 

时间: 2024-09-09 09:43:33

如何用JS清空上传控件input(type=file)的相关文章

如何用JS清空上传控件input(type=&quot;file&quot;)的值

var obj=网页中的<input type="file" /> obj.outerhtml = obj.outerhtml.replace(/(value=").+"/i, "$1""); 更经典的方法 需要清空<input type="file">的值,但上传控件<input type="file">的值不能通过网页特效来修改. google找到这样一个解

JS清空上传控件input(type=&amp;quot;file&amp;quot;)的值的代码第1/2页_javascript技巧

google找到这样一个解决方法: 在上传控件中插入了值,就只能通过form的reset功能来清空了,但是form里面其他的值也被reset了. 既然可以使用form的reset清空,那就有办法了:新建一个临时form,然后将需要清空的上传控件移入其中,reset之后,再移回原来所在位置,最后删除创建的临时form.js代码:  复制代码 代码如下: var Upload = { clear: function(id){ var up = (typeof id=="string")?d

CSS美化上传控件input type=file特效

第一种普通上传样式 第二种按钮样式

上传控件(input type=&quot;file&quot;)的用法

//判断上传的文件是否为空HttpPostedFile postFile = Request.Files["upfile"];if (postFile == null || postFile.ContentLength < 0){     //提示为空或者其他操作  }  //如果是文本文件,读取其内容Stream s = StreamCopyTo(postFile.InputStream);StreamReader sr = new StreamReader(s, System

清空上传控件input file的值_表单特效

复制代码 代码如下: var obj=网页中的<input type="file" /> obj.outerHTML = obj.outerHTML.replace(/(value=\").+\"/i, "$1\"");

学习使用AngularJS文件上传控件_AngularJS

前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用angular,且不想因为一个上传功能又引入一个jquery,所以在网上查找基于angular的上传控件,因为angular还算比较新,貌似都没有太成熟的插件,网上的教程也大多是复制粘贴,总之没起倒多大的作用...但是皇天不负有心人,最后还是让我遇到了这个功能强大的插件,让我有种相见恨晚的感觉呀,依靠官方文档和师兄的帮助,终于搞清楚了基本的使用方法.好东

ploadify上传控件问题-.NET页面多个Uploadify上传控件,上传失败!

问题描述 .NET页面多个Uploadify上传控件,上传失败! 今天遇到一个很棘手的问题,我一个页面中加了四个Uploadify上传控件.但是点击浏览按钮时选择文件后之后排在最后一个的上传控件可以正常上传文件.其他几个上传控件都选择文件之后均没有反应!也没有报什么js错误,不知道什么原因,有遇到类似此类问题的同行吗?急等大家的指点!!! 解决方案 用fiddler调试下,有没有上传的数据产生,表单名字是什么,等等,看看你是不是脚本写错了.

.net 实现图片上传的同时在网页中显示,主要是上传控件没有事件,想不出怎么弄,求大手指点

问题描述 .net实现图片上传的同时在网页中显示,主要是上传控件没有事件,想不出来怎么弄,求大手指点 解决方案 解决方案二:如果你是用的服务器控件,那也有事件的啊如果你不是的话,那就要用js来通知更新,可以的方法有:1.后台返回js,更新指定img2.前端定时轮询,超出次数则提示上传失败

ASP.NET文件上传控件Uploadify的使用方法_实用技巧

对于文件上传来说,有很多种实现方式,如传统的表单方式,现在流行的flash方式,甚至还有纯JS方式,之所以有这些方式来实现文件上传,我想主要原因是因为,传统的上传对于大文件支持不够,因为它是单线程同步机制,当大文件通过HTTP方式发送到服务端时,对于服务端站点的主线程影响比较大,会产生阻塞,所以,现在很多上传控制都是异步,多线程的方式去实现的. 今天来介绍一个文件上传控制,它就是Uploadify,它应该是flash的异步上传工具,对于大文件支持还不错,所以,我选择了它. 相关API介绍 upl