JS清空上传控件input(type="file")的值的代码第1/2页
时间：2023-08-13 07:22:28
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>
标签：JS,清空,input,file
0
投稿猜你喜欢
如何基于Python获取图片的物理尺寸
2023-03-25 00:17:19
itchat-python搭建微信机器人(附示例)
2022-05-04 00:00:54
Python实现光速定位并提取两个文件的不同之处
2023-11-01 10:42:25
javascript操作ASP.NET服务器控件
2023-07-21 15:09:26
关于Mysql-connector-java驱动版本问题总结
2024-01-19 02:07:58
使用版本控制原因及Git与Subversion介绍
2023-12-09 22:29:18
详解如何利用Python实现报表自动化
2021-08-25 19:28:45
Python装饰器代码详解
2021-04-28 23:16:03
ASP链接Mysql数据库 非DSN连接的方法
2009-03-09 18:24:00
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2024-06-16 21:04:57
MySQL的Query Cache原理分析
2024-01-25 05:20:29
Python中Collections模块的Counter容器类使用教程
2021-10-23 07:28:44
不同操作系统下的mysql数据库同步
2008-12-22 14:41:00
python关键字and和or用法实例
2023-12-19 20:07:40
Python实现类似比特币的加密货币区块链的创建与交易实例
2022-03-19 15:49:49
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2022-06-11 15:58:50
asp 小偷采集程序原理与常用函数方法
2011-03-06 10:36:00
详解MySQL导出指定表中的数据的实例
2024-01-15 05:23:09
python3的url编码和解码,自定义gbk、utf-8的例子
2022-08-02 10:07:39
python进行参数传递的方法
2023-05-21 06:15:32