通过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(''); 
}) ;

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

Answer 2

现在在2014年,具有id的输入元素支持该功能val('').

对于输入 -

<input type="file" multiple="true" id="File1" name="choose-file" />

这个js清除了输入元素 -

$("#File1").val('');

Answer 3

是的,上传元素受到保护,不会在不同的浏览器中直接操作.但是,您可以从DOM树中删除该元素,然后通过JavaScript在其位置插入一个新元素.这会给你相同的结果.

有点像:

$('#container-element').html('<input id="upload-file" type="file"/>');

Answer 4

简单的解决方案：

document.getElementById("upload-files").value = "";

Answer 5

我最终使用的代码是,

clearReviewFileSel: function() {
  var oldInput = document.getElementById('edit-file-upload-review-pdf') ;
  var newInput = document.createElement('input');
  newInput.id    = oldInput.id ;
  newInput.type  = oldInput.type ;
  newInput.name  = oldInput.name ;
  newInput.size  = oldInput.size ;
  newInput.class  = oldInput.class ;
  oldInput.parentNode.replaceChild(newInput, oldInput); 
}

感谢大家的建议和指点!

Answer 6

更短的version对我来说是完美的，如下所示：

document.querySelector('#fileUpload').value = "";