重置HTML File元素的内容

分类:Html_Css| 发布:camnprbubuol| 查看: | 发表时间:2010/9/26

在上传图片时,用到清除type="file"控件的值,document.getElementById(id).value=""; 这样不行。考虑时间紧迫,就用location.reload();刷新清除了。

下边是另一个,不刷新的解决方案:

Tester file了一个Bug,要求在某种情况下重置页面上File元素的内容。这种情形PM以前也没考虑到,虽然这种情况对产品根本没有影响,不过考虑到用户的友好性我同意做修改。问题是,写File元素的Value属性是不起作用的(这是出于安全性的考虑),也没有其他方法可以Reset这个元素!美国的那位弟兄在那里说:“This seems crazy that it can’t be cleared.” 那就麻烦你去Crazy好了。
解决方案是,将该元素移入一个From然后用form的reset方法清空它的内容。

如果某天那位大拿研究我们网站的代码(其实现在每天都有无数的人在研究),被这奇怪的代码搞得一头雾水,请不要骂人,哼哼,这是我干的。

<html>
<head>
<script>
function ResetFileCtrl(ctrl,pos)
{
   var hiddenForm = document.getElementById("hiddenForm");
   hiddenForm.insertAdjacentElement("afterBegin",ctrl);
   hiddenForm.reset();
   pos.insertAdjacentElement("beforeBegin",ctrl);
}
</script>
</head>
<body>
<input type="file" id="f" /><input type="button" id="b" onclick="ResetFileCtrl(f,b);" value="Reset" />
<form id="hiddenForm" style="display:none"></form>
</body>
</html>

补记:
今天,测试人员File了一个Bug,说上述代码在IE,Opera,Netscape运行良好但在FireFox下不能正确运行。看了BUG不仅有点气恼,我们难道要支持世界上所有的浏览器吗?!想都没想就很理直气壮地一脚把Bug踢给了PM。没多久PM把BUG转了回来,只有一句话:“Does this not work because our code isn’t HTML 4.01 compliant?”.检查了一下代码,的确,insertAdjacentElement不在W3C的DOM中。MSDN上这样写:
Standards Information
There is no public standard that applies to this method.

这给我上了一堂深刻的教育课:“世界上就怕认真二字”。
改写代码如下,明天继续作测试。

<html>
<head>
<script>
function ResetFileCtrl(ctrl,pos)
{
   var hiddenForm = document.getElementById("hiddenForm");
   hiddenForm.appendChild(ctrl);
   hiddenForm.reset();
   hiddenForm.removeChild(ctrl);
   document.body.insertBefore(ctrl,pos);
}
</script>
</head>
<body>
<input type="file" id="f" /><input type="button" id="b" onclick="ResetFileCtrl(f,b);" value="Reset" />
<input type="button" value="test" onclick="alert(f.value);" />
<form id="hiddenForm" style="display:none"></form>
</body>
</html>
 

365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/archives/47.html

相关文章