JS清空上傳控件input(type="file")的值的代碼第2/2頁
更新時間:2008年11月14日 22:46:25 作者:
最近做的一個小功能,需要清空<input type="file">的值,但上傳控件<input type="file">的值不能通過JavaScript來修改。
復制代碼 代碼如下:
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>
相關(guān)文章
JS實現(xiàn)帶緩沖效果打開、關(guān)閉、移動一個層的方法
這篇文章主要介紹了JS實現(xiàn)帶緩沖效果打開、關(guān)閉、移動一個層的方法,涉及javascript鼠標事件及頁面元素操作技巧,需要的朋友可以參考下2015-05-05微信小程序中使用ECharts 異步加載數(shù)據(jù)實現(xiàn)圖表功能
本文通過實例代碼給大家介紹了微信小程序中使用ECharts 異步加載數(shù)據(jù)實現(xiàn)圖表功能,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2018-07-07JavaScript canvas復刻蘋果發(fā)布會環(huán)形進度條
canvas 真是一個好東西,它給前端插上了想象的翅膀,伴隨著 h5 而來,將 web 代入了新的領(lǐng)域。本文將利用anvas復刻蘋果發(fā)布會環(huán)形進度條,感興趣的可以嘗試一下2022-07-07