使用JS清空fileupload 控件值

在平时项目开发中会有上传文件的功能,一般在前端会通过JS来判断上传文件是否属于指定的文件类型,如果不属于就将控件值清空! (当然你也可以不清空)

有一种方法可以很简单的装文件上传组件的值清空,代码如下:

var file=document.getElementById("fileupload");
file.outerHTML=file.outerHTML

评论

15 楼 lvhongfen 2011-11-02  

var file=document.getElementById('file');
file.outerHTML=file.outerHTML;

我的是IE8支持，但FireFox6却对此不支持！

14 楼 lvhongfen 2011-11-02  

var file=document.getElementById('file');
file.outerHTML=file.outerHTML;

上面这种方式在IE上可以，但FireFox不支持啊！

13 楼 cuixiping 2009-11-06  

我的理想是，每个表单元素(text, radio, file, ....)都提供一个reset()方法给我们。

12 楼 lengyun3566 2009-10-30  

fins 写道

outerHTML不是所有浏览器都支持

2搂的方案 也许不符合楼主的原意 因为楼主可能只想清空单独的一个fileuoload
reset会对所有form中的元素生效.
而且reset 和 清空 是两个概念.

我的做法是remove fileUpload, 然后再重新创建一个一摸一样的. 

我也是这么做的

11 楼 edokeh 2009-10-30  

我建议：把这个file控件移到一个看不见的form中，form.reset()，然后再移回来

10 楼 huangxuan2046 2009-10-30  

sunjun 写道

<span id='uploadSpan'>
<input type="file">
</span>
<script language="JavaScript">
var html=document.getElementById('uploadSpan').innerHTML;

function resetFile(){
document.getElementById('uploadSpan').innerHTML=html;
}
</script>
这样就行了，各浏览器都支持的

确实是个好办法！！也谢谢楼上的大侠的提醒。。
我挺受不了firefox的， 老是更新都不知道把他启动速度慢的问题解决了。他的那个启动速度太慢了。。。。

9 楼 areha001 2009-10-30  

huangxuan2046 写道

xht314 写道

在平时项目开发中会有上传文件的功能,一般在前端会通过JS来判断上传文件是否属于指定的文件类型,如果不属于就将控件值清空! (当然你也可以不清空)

有一种方法可以很简单的装文件上传组件的值清空,代码如下:

var file=document.getElementById("fileupload");
file.outerHTML=file.outerHTML

//f为file控件的id
var $=document.getElementById;
document.getElementById("f").outerHTML?$("f").outerHTML=$("f").outerHTML:document.getElementById("f").value="";
这段代码可以兼容ie和firefox（至少3.5支持，别的没试过）。
是不是觉得我那段代码太长了？明明定义了var $=document.getElementById;为什么没有用？
唉 firefox又一次的征服了我 为什么var $=document.getElementById;这段代码在火狐中不能用呢？
比如alert（$("f")）在firefox中没有反应。
难道这种写法：var $=document.getElementById;有问题?

function test(id){
return id;
};
var t=test;
alert(t("test"));

又试了试这样  结果一切正常。。。
测试的时候没有添加任何其他的库所以也应该不存在$重复问题
晕啊 这到底是为什么 路过的大侠谁能告诉我？

document.getElementById是内置的JS方法，FF下不能进行这种操作。

按这样吧。。。

var $ = function(obj)
{
	return document.getElementById(obj);
}

alert($('a'));

8 楼 sunjun 2009-10-30  

<span id='uploadSpan'>
<input type="file">
</span>
<script language="JavaScript">
var html=document.getElementById('uploadSpan').innerHTML;

function resetFile(){
document.getElementById('uploadSpan').innerHTML=html;
}
</script>
这样就行了，各浏览器都支持的

7 楼 huangxuan2046 2009-10-30  

xht314 写道

在平时项目开发中会有上传文件的功能,一般在前端会通过JS来判断上传文件是否属于指定的文件类型,如果不属于就将控件值清空! (当然你也可以不清空)

有一种方法可以很简单的装文件上传组件的值清空,代码如下:

var file=document.getElementById("fileupload");
file.outerHTML=file.outerHTML

//f为file控件的id
var $=document.getElementById;
document.getElementById("f").outerHTML?$("f").outerHTML=$("f").outerHTML:document.getElementById("f").value="";
这段代码可以兼容ie和firefox（至少3.5支持，别的没试过）。
是不是觉得我那段代码太长了？明明定义了var $=document.getElementById;为什么没有用？
唉 firefox又一次的征服了我 为什么var $=document.getElementById;这段代码在火狐中不能用呢？
比如alert（$("f")）在firefox中没有反应。
难道这种写法：var $=document.getElementById;有问题?

function test(id){
return id;
};
var t=test;
alert(t("test"));

又试了试这样  结果一切正常。。。
测试的时候没有添加任何其他的库所以也应该不存在$重复问题
晕啊 这到底是为什么 路过的大侠谁能告诉我？

6 楼 captmjc 2009-10-29  

kendy630314511 写道

document.getElementById("**").select();
document.execCommand("delete");


用这两句就行了

1, 还不如form.reset()
2, 兼容性比outerHTML还差

5 楼 kendy630314511 2009-10-29  

document.getElementById("**").select();
document.execCommand("delete");


用这两句就行了

4 楼 xht314 2009-10-26  

恩。的确是remove fileUpload, 然后再重新创建一个比较好，至少不至于在多浏览器间发生不兼容的问题。  谢谢大家的意见！

3 楼 冯冀川 2009-10-23  

fins 写道

outerHTML不是所有浏览器都支持

2搂的方案 也许不符合楼主的原意 因为楼主可能只想清空单独的一个fileuoload
reset会对所有form中的元素生效.
而且reset 和 清空 是两个概念.

我的做法是remove fileUpload, 然后再重新创建一个一摸一样的. 

楼上正解，呵呵，在做项目的时候也碰到了相同的问题，就是将原有fileupload的input节点删除，重新创建一个

2 楼 fins 2009-10-23  

outerHTML不是所有浏览器都支持

2搂的方案 也许不符合楼主的原意 因为楼主可能只想清空单独的一个fileuoload
reset会对所有form中的元素生效.
而且reset 和 清空 是两个概念.

我的做法是remove fileUpload, 然后再重新创建一个一摸一样的. 

1 楼 lifesinger 2009-10-23  

对应的 form.reset() 即可