Question

我刚检查了基于

重置/清除<input type='file' />的所有选项

Clearing <input type='file' /> using jQuery

所有这些都没有用。

我在页面中所做的是以正常方式提交新文件和更新页面。

HTML

<form>
 <input type="file" name="file" id="fileUploader" class="btn btn-sm btn-default" />
</form>

然后我有AJAX链接删除上传的文件。所以我在Session中删除了它，在AJAX回调中就像

一样

 //Reset
 var uploader = $("#fileUploader");
 window.reset = function (uploader) {
            e.wrap('<form>').closest('form').get(0).reset();
            e.unwrap();
 }
 uploader.reset();

 // Clear all file fields:
 // $("input:file").clearInputs();

 // Clear also hidden fields:
 //$("input:file").clearInputs(true);

 //$row.replaceWith($row = $row.val('').clone(true));

但在此之后，当我执行F5 /更新 HttpPost 时，它已发布文件。

如何解决？

P.S。 即使我做了以下没有快乐......

 $('#inputFileForm').html("");

                $('#inputFileForm').append(
                    //  <input type="file" name="file" id="fileUploader" class="btn btn-sm btn-default" />
                    $('<input/>').attr('type', 'file').attr('name', 'file').class("btn btn-sm btn-default")
           );

Answer 1

清除文件输入的唯一可靠方法是替换元素，因为某些浏览器（主要是IE）不允许您重置文件输入的值

var input = $("#fileUploader");

input.replaceWith(input.clone(true));

这会保留事件但会清除输入值（未克隆值）

Answer 2

我将跳出框一会儿，并为使用FormData（）对象的问题提供解决方案。它将多个文件存储为键/值。您需要确保目标受众群体能够支持它（请查看Can I Use以获取参考）。按MDN，

XMLHttpRequest Level 2增加了对新FormData接口的支持。 FormData对象提供了一种轻松构造一组键/值的方法代表表单字段及其值的对，然后可以使用XMLHttpRequest send（）方法轻松发送。 [来源：MDN]

首先，您要实例化对象以存储您的文件。我们将创建一个新的FormData（）对象：

var formData = new FormData();

接下来，您将要遍历文件输入框中的每个文件：

// your input
var myInput = document.getElementById("fileUploader");
for (i = 0; i < myInput.files.length; i++) {
  // iterate through each file in the input
  // and append it to the new FormData() object
  formData.append(myInput.files[i].name, myInput.files[i]);
  // files[i].name will assign the key of "myfile.png"
  // files[i] will assign the value of your your file
}

现在，您可以将所有文件放在一个对象中，可以通过XMLHttpRequest或$ .ajax直接上传。例如：

var xhr = new XMLHttpRequest();
xhr.open('POST', ajaxPostPath);
xhr.send(formData);
xhr.onreadystatechange = function () {
   if (xhr.readyState == 4 && xhr.status == 200) {
      // hooray! it worked!
   }
}

现在，您需要做的就是每次需要提交时都实例化一个新的FormData（）对象。

所以，如果你有一个提交按钮......

$(document).ready(function() {
   $("#mySubmitBtn").on("click", function() {
      var myInput = document.getElementById("fileUploader");
      for (i = 0; i < myInput.files.length; i++) {
          formData.append(myInput.files[i].name, myInput.files[i]);
      }
      var xhr = new XMLHttpRequest();
      xhr.open('POST', ajaxPostPath);
      xhr.send(formData);
      xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
         // hooray! it worked!
      }
    }
   });
});

同样，这完全是另一条路线，但它可以让您完全控制发送到服务器的文件，而不必担心IE / Chrome / FF的不一致和重置文件输入类型。如果您想看一个示例，我有一个半可读的脚本，您可以查看here。

如何在ASP.NET MVC中重置<input type =“file”/>

2 个答案: