最近做的一个小功能，需要清空<input type="file">的值，但上传控件<input type="file">的值不能通过JavaScript来修改。
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);
}
}
这个方法使用示例：
<!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>
分享到：
相关推荐
上传控件（<input type=”file”/>）用于在客户端浏览并上传文件，用户选取的路径...js 获取<intput type=file>的值 代码如下:<html>[removed] function show(){ var p=document.getElementById(“file
最近做的一个小功能，需要清空<input type="file">的值，但上传控件<input type="file">的值不能通过JavaScript来修改。
既然可以使用form的reset清空，那就有办法了：新建一个临时form，然后将需要清空的上传控件移入其中，reset之后，再移回原来所在位置，最后删除创建的临时form。js代码： 代码如下:var Upload = { clear: function...
清空上传控件input file的值的代码
input type=”file” id=”fileupload” name=”file” /> 第一种: (display:none时不能用) 代码如下:var obj = document.getElementById(‘fileupload’) ; obj.select(); document.execCommand(“delete...
开发环境vs2005,在上传文件时,需要一个取消的按钮来清空type=file的value,而且这个页面上有多个file控件 这个比较麻烦因为file的值本身是不允许用脚本修改的(安全角度考虑) 方法1).使用脚本把这个file的input移动到...
Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...
form表单元素包括：text 文本输入框，password密码输入框，checkbox复选框，radio单选框，file 文件域，submit表单提交action指向的文件，reset表单清空，image图片提交按钮，button按钮，hidden隐藏域。 select ...
//清空上传域file document.getElementById('FileName').select(); document.selection.clear(); } }else{ alert("error"); } } } //打开连接，true表示异步提交 xmlhttp.open("post", "ajax_txt_save....
不要使用Response.Redirect,而应该使用Server.Transfer e.g // in global.asax protected void Application_Error(Object sender, EventArgs e) { if (Server.GetLastError() is HttpUnhandledException) Server...
不要使用Response.Redirect,而应该使用Server.Transfer e.g // in global.asax protected void Application_Error(Object sender, EventArgs e) { if (Server.GetLastError() is HttpUnhandledException) Server....
添加一个Button 控件，用来使用MD5算法对输入的数据进行加密。 （3）程序主要代码如下： public string Encrypt(string strPwd) { MD5 md5 = new MD5CryptoServiceProvider(); //创建MD5 对象 byte[] data = System....
- 采用全新上传控件,跟安全,更好的体验。 - 拖拽支持文件夹,多个文件。上传自动过滤不允许的文件类型 - 拖拽上传 和上统一优化,修复webuploader的文件判断；火狐拖拽上传,ie9+拖拽上传。 - 上传时自动过滤不合格...