重置file input

Author : lovecicy
表單中常常有須要上傳文件的表單項，可是這是一個比較特殊的表單控件，在各個瀏覽器中的呈現方式都不同。在IE中，它的呈現方式是不可輸入的輸入框加按鈕；在Chrome下，它的呈現方式是一個按鈕加右邊的文件名，若是沒有文件被選中，則顯示「No file chosen」。FF和IE8顯示相同。

除了呈現方式不一樣以外，其特殊性也表如今其value屬性上。由於安全性的問題，咱們不能設置它的value值，甚至連讀它的value值都不是咱們想要的。在IE8下，讀value值能夠返回真實的文件路徑；而在Chrome下則只能返回「C:\fakepath\」+文件名；FF下則只有文件名。

更加棘手的問題是，一旦選中了某個文件，怎麼將表單項reset。在Chrome下最簡單，直接再點按鈕，選擇cancel就能夠reset了；在FF和IE8下就不行了。在Chrome和FF下，咱們能夠經過js將input的value設置爲空來重置其值，可是在IE8下，value值沒法經過js設置。

這樣，當須要重置input的值的時候，就不能單純的經過設置input的value來重置了。

若是能夠的話，最簡單的方法就是選擇input所在的form，調用form的reset方法，這樣就沒有兼容性問題了。可是咱們常常須要對單個的input進行reset而不是整個表單。因此，能夠直接將整個input用原來的html替換掉：

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

這樣，就能夠直接重置input。在MDN給出的outerHTML的瀏覽器兼容性爲：

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support (11) 0.2 4.0 7 1.3
也能夠經過cloneNode方法，複製file input，並調用父節點的replaceNode方法替換原來的input：

var file = document.getElementById(inputId);
file.value=」";
file.parentNode.replaceChild(file.cloneNode(true),file);

若是中間那句不加的話，火狐下只會複製，不會reset。

若是使用jQuery，能夠使用下面的方法：

$(inputId).replaceWith($(inputId).val('').clone(true));

代碼中設置input的value爲空是由於FF和Chrome能夠接受value值設置。