JS清空上傳控件input(type="file")的值的代碼
更新時間：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>
相關文章
參數(shù)有中包含空格且使用Post提交時須將空格轉換成加號,這樣后臺程序接受到的才是真正的空格,感興趣的朋友可以了解下2013-01-01
這篇文章主要介紹了原生js實現(xiàn)移動端Touch輪播圖的方法步驟，touch輪播圖其實就是通過手指的滑動，來左右切換輪播圖，touch輪播圖其實就是通過手指的滑動，來左右切換輪播圖，2019-01-01
這篇文章主要介紹了微信小程序日歷插件代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-12-12
Array定義與sort方法在使用過程中還是比較常見的，下面為大家介紹下Array的定義及sort方法使用示例2013-08-08
小程序云開發(fā)實現(xiàn)數(shù)據(jù)庫異步操作同步化
這篇文章主要為大家詳細介紹了小程序云開發(fā)實現(xiàn)數(shù)據(jù)庫異步操作同步化，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了JS實現(xiàn)的顏色實時漸變效果,結合實例形式分析了JavaScript結合時間函數(shù)定時觸發(fā)動態(tài)改變頁面元素屬性的相關技巧,需要的朋友可以參考下2016-03-03
關于微信小程序獲取小程序碼并接受buffer流保存為圖片的方法
這篇文章主要介紹了關于微信小程序獲取小程序碼并接受buffer流保存為圖片的方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用小程序具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧<BR>2019-06-06
微信小程序--onShareAppMessage分享參數(shù)用處(頁面分享)
本篇文章主要介紹了微信小程序的頁面分享onShareAppMessage分享參數(shù)用處的相關資料。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要為大家詳細介紹了js實現(xiàn)貪吃蛇游戲，canvas繪制地圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要給大家介紹了關于JavaScript中常用的幾種字符串方法的相關資料，文中通過圖文介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04