有时候页面有很多上传控件的时候,要reset某个上传控件比较头痛,因为不能用form.reset,这里我想到一个变通的方法来解决
原理是将控件移动到一个隐藏表单中,reset后再移回来,请看下面完整的示例.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Demo</title>
<script>
function ResetFileCtrl(ctrl)
{
var hiddenForm = document.getElementById("hiddenResetForm");
var oTemp = document.createElement("<DIV id=tempResetPos>dd</DIV>");
ctrl.parentNode.insertBefore(oTemp, ctrl);
hiddenForm.appendChild(ctrl);
hiddenForm.reset();
hiddenForm.removeChild(ctrl);
oTemp.parentNode.insertBefore(ctrl,oTemp);
oTemp.parentNode.removeChild(oTemp);
}
</script>
</head>
<body>
<input type="file" id="f" /><input type="button" id="b" onclick="ResetFileCtrl(f);" value="Reset1" />
<input type="button" value="test1" onclick="alert(f.value);" /> <br>
<input type="file" id="f2" /><input type="button" id="b" onclick="ResetFileCtrl(f2);" value="Reset2" />
<input type="button" value="test2" onclick="alert(f2.value);" />
<form id="hiddenResetForm" style="display:none"></form>
</body>
</html>
使用时只用注意调用ResetFileCtrl方法,并给body增加一个隐藏表单。代码已测试。注意inertbefore兼容ie和ff,但是ie需要6.0+