如何用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-15 04:13:05

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

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

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\"");

js 获取、清空input type=&quot;file&quot;的值

 本篇文章主要介绍了js 获取.清空input type="file"的值(示例代码) 需要的朋友可以过来参考下,希望对大家有所帮助 上传控件(<input type="file"/>)用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的,不能通过 javascript来赋值,这就使得不能通过value=""语句来清空它.很容易理解为什么只读,如果可以随意赋值的话,那么用户只要打开你的网页, 你

js 获取、清空input type=&quot;file&quot;的值示例代码

 本篇文章主要是对js获取.清空input type="file"的值的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 上传控件基础知识说明:   上传控件(<input type="file"/>)用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的,不能通过javascript来赋值,这就使得不能通过value=""语句来清空它.很容易理解为什么只读,如果可以随意赋值的话,

js 获取、清空input type=&quot;file&quot;的值示例代码_javascript技巧

上传控件基础知识说明: 上传控件(<input type="file"/>)用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的,不能通过javascript来赋值,这就使得不能通过value=""语句来清空它.很容易理解为什么只读,如果可以随意赋值的话,那么用户只要打开你的网页,你就可以随心所欲的上传他电脑上的文件了. js 获取<intput type=file />的值 复制代码 代码如下: &l

jquery.fileEveryWhere.js跨浏览器显示的file上传控件

我们可以到 主页:http://aquantum-demo.appspot.com/file-upload 下载:https://github.com/blueimp/jQuery-File-Upload 示例:http://aquantum-demo.appspot.com/file-upload 要让file在各个浏览器显示统一,纯样式已经控制不了,只能用js脚本了.基本步骤有3:  1,通过文本框和按钮去模拟一个input type="file".  2,把input="