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值設置。