javascript - 通过 JavaScript 清除 HTML 文件上传字段

Question

我想在用户选择另一个选项时重置文件上传字段。

这可以通过 JavaScript 实现吗？我怀疑文件上传元素的处理方式不同，因为它与用户的文件系统交互，并且可能是不可变的。

基本上，我想要的是(伪代码):

// Choose selecting existing file
$('#select-file').bind('focus', function() {
  // Clear any files currently selected in #upload-file
  $('#upload-file').val(''); 
}) ;

// Choose uploading new one - this works ok
$('#upload-file').bind('focus', function() {
  // Clear any files currently selected in #select-file
  $('#select-file').val(''); 
}) ;

注意:这个问题及其答案的时间跨度从 2009 年到今天。那段时间浏览器和方法发生了变化，请考虑到这一点来选择您的解决方案:)

Answer 1

您不能在大多数浏览器中设置输入值，但您可以做的是创建一个新元素，从旧元素复制属性，然后交换两者。

给定如下形式:

<form> 
    <input id="fileInput" name="fileInput" type="file" /> 
</form>

直接的 DOM 方式:

function clearFileInput(id) 
{ 
    var oldInput = document.getElementById(id); 

    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; 
    // TODO: copy any other relevant attributes 

    oldInput.parentNode.replaceChild(newInput, oldInput); 
}

clearFileInput("fileInput");

简单的 DOM 方式。这可能不适用于不喜欢文件输入的旧浏览器:

oldInput.parentNode.replaceChild(oldInput.cloneNode(), oldInput);

jQuery 方式:

$("#fileInput").replaceWith($("#fileInput").val('').clone(true));

// .val('') required for FF compatibility as per @nmit026

通过 jQuery 重置整个表单:https://stackoverflow.com/a/13351234/1091947