在日常使用file input時(shí)亚脆，都會(huì)涉及到文件按鈕的重置遂唧。
重置一個(gè)文件域有三種方式
-
將文件域的value設(shè)置為空如输。
此種方式實(shí)現(xiàn)簡單，但是只兼容ie11以上或是現(xiàn)代瀏覽器旭旭。在兼容低版本的項(xiàng)目中不適用谎脯。
-
克隆或是創(chuàng)建新的file input 元素進(jìn)行替換
此種方式具有很強(qiáng)的兼容性，但是控件將丟失原有的事件監(jiān)聽器您机，所以并不適用穿肄。
-
調(diào)用表單控件的reset方法進(jìn)行重置
此種方式兼容性好年局，但是如果重置頁面內(nèi)表單會(huì)涉及到重置表內(nèi)其他控件的問題际看。這時(shí)候可能需要我們創(chuàng)建新的表單將文件域放入后reset咸产，之后再放回原處。示例代碼如下
function clearInputFile(f){ if(f.value){ try{ f.value = ''; //for IE11, latest Chrome/Firefox/Opera... }catch(err){ } if(f.value){ //for IE5 ~ IE10 var form = document.createElement('form'), ref = f.nextSibling, p = f.parentNode; form.appendChild(f); form.reset(); p.insertBefore(f,ref); } } }?
值得一提的是仲闽，如果使用Jquery脑溢，表單默認(rèn)是沒有reset方法的。
但是可以通過如下方式間接調(diào)用DOM對(duì)象的reset方法
$('#formId')[0].reset()
注：此種方式不能重置隱藏域赖欣，需要單獨(dú)處理屑彻。
