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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (24)

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

这是可能通过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(''); 
}) ;
提问于
用户回答回答于

您不能在大多数浏览器中设置输入值,但可以执行的操作是创建一个新元素,从旧元素中复制属性并交换这两个元素。

给定如下形式:

<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

用户回答回答于

具有id的输入元素支持该功能val('')

对于输入 -

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

这js清除输入元素 -

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

扫码关注云+社区