说明：

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的input元素支持函数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

我最终使用的代码是，

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 5

他们没有获得焦点事件，所以你必须使用这样的技巧：清除它的唯一方法是清除整个表格

<script type="text/javascript">
    $(function() {
        $("#wrapper").bind("mouseover", function() {
            $("form").get(0).reset();
        });
    });
</script>

<form>
<div id="wrapper">
    <input type=file value="" />
</div>
</form>

Answer 6

非常喜欢像这样保持简单：）

$('input[type=file]').wrap('<form></form>').parent().trigger('reset').children().unwrap('<form></form>');

Answer 7

简单的解决方案：

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

Answer 8

这个jQuery在IE11，Chrome 53和Firefox 49中为我工作：

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

Answer 9

较短的version对我来说非常适合，如下所示：

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

Answer 10

为了在ajax不可用时兼容，请设置.val（''），否则它将重新发送仍在输入中的最后一个ajax上传文件。以下内容应正确清除输入，同时保留.on（）事件：

var input = $("input[type='file']");
input.html(input.html()).val('');

Answer 11

如果您有以下内容：

<input type="file" id="FileSelect">

然后就这样做：

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

重置或清除上次选择的文件。

Answer 12

试试这个工作正常

document.getElementById('fileUpload').parentNode.innerHTML = document.getElementById('fileUpload').parentNode.innerHTML;

Answer 13

jQuery测试方法在FF＆amp;铬：

$(function(){
    $.clearUploadField = function(idsel){
        $('#your-id input[name="'+idsel+'"]').val("") 
    }
});

Answer 14

试试这段代码......

$("input[type=file]").wrap("<div id='fileWrapper'/>");
$("#fileWrapper").append("<div id='duplicateFile'   style='display:none'>"+$("#fileWrapper").html()+"   </div>");
$("#fileWrapper").html($("#duplicateFile").html());

Answer 15

我知道FormData api对于较旧的浏览器并不友好，但是在许多情况下，无论如何您都在使用它（并希望testing for support），所以它可以正常工作！

function clearFile(form) {
  // make a copy of your form
  var formData = new FormData(form);
  // reset the form temporarily, your copy is safe!
  form.reset();
  for (var pair of formData.entries()) {
    // if it's not the file, 
    if (pair[0] != "uploadNameAttributeFromForm") {
      // refill form value
      form[pair[0]].value = pair[1];
    }
    
  }
  // make new copy for AJAX submission if you into that...
  formData = new FormData(form);
}

Answer 16

另一个用于底池，但是您实际上可以更改输入的类型。如果将类型设置为文本，然后再返回文件，则似乎会重置该元素。

var myFileInput = document.getElementById('myfileinput');
myFileInput.type = "text";
myFileInput.type = "file";

它重置。在Google Chrome，Opera，Edge，IE 11中进行了测试

Answer 17

我遇到了ng2-file-upload的角度问题。如果您要通过ng2-file-upload寻找有关角度的解决方案，请参考以下代码

HTML：

<input type="file" name="myfile" #activeFrameinputFile ng2FileSelect [uploader]="frameUploader" (change)="frameUploader.uploadAll()" />

组件

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';

@ViewChild(' activeFrameinputFile ') InputFrameVariable : ElementRef;

this.frameUploader.onSuccessItem = (item, response, status, headers) => { this. InputFrameVariable .nativeElement.value = ''; };

Answer 18

我知道它已经很老了，但是可以在浏览器中进行测试：

$0.value=null; // when $0 is the file upload element we talking about

删除了值并允许我像以前一样重新选择相同的文件（意味着它起作用了！）

已经在Chrome 81，FF 76，Safari（在iPad mini上），360浏览器，百度浏览器，QQ浏览器，Android浏览器中进行了测试。

说明：

根据我的观点，选择的文件可以大于1，最好不要将值设置为字符串-最终值位于$ 0.files中，该值可能大于1。浏览器需要解析从“值”中选择的值，因此它是一个活动属性。根据我的理解，将其设置为null会导致浏览器将其解析为$ 0.files中的[]空列表（这是发生的事情...）

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

18 个答案:

说明：