上傳控件(<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);
}