[转]如何清空上传控件()的值

[转]如何清空上传控件()的值
上传控件(<input type="file"/>)用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的,不能通过javascript来赋值,这就使得不能通过value=""语句来清空它。很容易理解为什么只读,如果可以随意赋值的话,那么用户只要打开你的网页,你就可以随心所欲的上传他电脑上的文件了,呵呵,毕竟表单的submi是可以随便调用的。

而上传控件又没有一个clear()之类的函数,所以这使得无刷新上传文件显得稍稍不爽,尤其对于追求完美的开发者而言。然而今天在做一个Asp.net控件时却发现不得不需要清空一下上传控件,于是便开始想办法。网上搜索一番,不出所料,没有找到什么结果。关键时刻只能靠自己了。

仔细想想,上传控件是不是任何时候都不可能被清空呢?答案是否,form.reset()方法能够重置所有得表单元素。只要调用inputFile.form.reset(),那么上传控件的值就清空了,不要担心它被恢复为某个默认值,value是只读的,你不能为它设置某个初始值。

于是开始设想,如果我只需要reset一下上传控件,怎么解决?其他的表单元素要保持原状。一个可行的方法是,reset之前获取所有的表单域的值,之后再用这些值填充,虽然显得稍微复杂,但借助prototype框架的Form对象提供的方法,还是很容易做到的。这样就能够得到需要的结果了。

然而这个方法还是不够优雅,沿着思路继续想下去,不难得到改进的方法:创建一个新的form,把上传控件临时放过来,再调用这个form的reset方法,完工之后再把上传控件弄回去。这个form无需进入DOM结构便能正常工作,所以不用担心会对界面有任影响。下面给出函数实现,经过验证工作良好,呵呵。
//清空文件上传框
function  clearFileInput ( file ){
     var  form = document . createElement ( 'form' );
     document . body . appendChild ( form );
     //记住file在旧表单中的的位置
     var  pos = file . nextSibling ;
     form . appendChild ( file );
     form . reset ();
     pos . parentNode . insertBefore ( file , pos );
     document . body . removeChild ( form );
}

你可能感兴趣的:([转]如何清空上传控件()的值)