清空 HTML File Input

因为浏览器安全限制，通常的方法，如把value设为null或空字符串，是无法清空HTML file input的。大多数浏览器中，给file input的value设置null值，要么无效，要么产生错误。解决办法是，复制老元素的属性，创建一个新元素，然后进行替换。

这是一个例子:

HTML页面:

<form ...> 
    ... 
    <input id="fileInput" name="fileInput" type="file" /> 
    <input οnclick="clearFileInput()" type="button" value="Clear" /> 
    ... 
</form>

清空 file input的Javascript :

function clearFileInput() 
{ 
    var oldInput = document.getElementById("fileInput"); 
     
    var newInput = document.createElement("input"); 
     
    newInput.type = "file"; 
    newInput.id = oldInput.id; 
    newInput.name = oldInput.name; 
    newInput.className = oldInput.className; 
    newInput.style.cssText = oldInput.style.cssText; 
    // 复制其它相关属性
     
    oldInput.parentNode.replaceChild(newInput, oldInput); 
}

本文由尤慕译自这里，转载请保留此信息。