网络编程
位置：首页>> 网络编程>> JavaScript>> JS清空上传控件input(type="file")的值的代码第1/2页

JS清空上传控件input(type="file")的值的代码第1/2页

　　发布时间：2023-08-13 07:22:28　

标签：JS,清空,input,file

google找到这样一个解决方法：
在上传控件中插入了值，就只能通过form的reset功能来清空了，但是form里面其他的值也被reset了。
既然可以使用form的reset清空，那就有办法了：新建一个临时form，然后将需要清空的上传控件移入其中，reset之后，再移回原来所在位置，最后删除创建的临时form。js代码： 


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);
}
}
view plaincopy to clipboardprint?
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/javascript"> 

<!--引入以上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> 

0
投稿

猜你喜欢

  • 无论安装何版本的mysql，在管理工具的服务中启动mysql服务时都会在中途报错。内容为：在 本地计算机 无法启动mysql服务 错误106
  • 关于oracle 优化的内容很多，概念庞杂，不过可以总结出一个大纲性的东西作为需要考虑的方向，然后再逐步细化。oracle优化按重要性需要考
  • 在我的上篇文章发出之后，我听到对“WEb2.0视觉风格”这个称谓的不认同声音。其实这并不出乎我的意料，因为，我在认真的开始思考“WEb2.0
  • #!/usr/local/bin/php -q author:freemouse <?php // 下面是说明. print (&qu
  • asp分页，是学习使用asp编程经常遇到的问题，也算是一个经典的问题。本文介绍了一个asp分页源代码例子，希望对初学者有所帮助，本程序文件名
  • 有时会在存储过程中处理一些XML格式的数据，所以会用到sp_xml_preparedocument，他可以将XML数据进行读取，然后使用 M
  • 在给blog加上无刷新搜索和即时验证检测后，又看了下代码，感觉太过麻烦，就把XMLHttpRequest请求封装到一个类里面，用起来方便多了
  • 动态变量名赋值在使用 tkinter 时需要动态生成变量，如动态生成 var1...var10 变量。使用 exec 动态赋值exec 在
  • SQL Server有几个版本都在使用中&mdash;&mdash;4.2, 6.0, 6.5, 7.0, 2000，以及2
  • 下面我们以论坛排行榜举例说明：<％ @ LANGUAGE="VBSCRIPT" ％&
  • 以前写过《 10条影响CSS渲染速度的写法与建议》，今天放些数据出来，供参考；首先说明一点，CSS对网页的最后渲染出来的速度影响非
  • 以下的文章主要是介绍SQL Server数据库与其实际应用元数据，我前两天在相关网站看见SQL Server数据库与其实际应用元数据的资料，
  • 2008北京奥运会块到了，下面的js代码将告诉你，离奥运会开幕还要多少天！让我们一起迎接这美好的时刻。相关文章推荐：各种北京2008奥运会倒
  • 笔者认为，在创建索引时要做到三个适当，即在适当的表上、适当的列上创建适当数量的索引。虽然这可以通过一句话来概括优化的索引的基本准则，但是要做
  • Serilog是.net下的新兴的日志框架，本文这里简单的介绍一下它的用法。首先安装Nuget包：Install-Package Seril
  • 概述一个状态管理工具Store：保存数据的地方，你可以把它看成一个容器，整个应用只能有一个 Store。State：包含所有数据，如果想得到
  • 在我们建立一个数据库时，并且想将分散在各处的不同类型的数据库分类汇总在这个新建的数据库中时，尤其是在进行数据检验、净化和转换时，将会面临很大
  •  <％'使用说明'Dim a'Set a=new CreateExce
  • MySQL是一个非常流行的小型关系型数据库管理系统，2008年1月16号被Sun公司收购。目前MySQL被广泛地应用在Internet上的中
  • 还是一个关于checkbox的一个普通的效果，就是根据你勾选的checkbox,列出你选择了哪些值演示代码：<!DOCTYPE htm
手机版 网络编程 asp之家 www.aspxhome.com