Javascript 如何重置<；输入类型='；文件'/&燃气轮机；在ASP.NETMVC中

我刚刚选中了所有选项，根据

所有这些都不起作用

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

HTML

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

然后我有AJAX链接来删除上传的文件。所以我在会话和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));

//重置
var uploader=$（“#fileUploader”）；
window.reset=函数（上传器）{
e、 换行（“”）.closest（'form'）.get（0.reset（）；
e、 展开（）；
}
uploader.reset（）；
//清除所有文件字段：
//$（“输入：文件”）.clearInputs（）；
//同时清除隐藏字段：
//$（“输入：文件”）.clearInputs（true）；
//$row.replaceWith（$row=$row.val（“”）.clone（true））；

但在此之后，当我执行F5/UpdateHttpPost时，就会发生，并且它已经发布了文件

如何修复它

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")
           );

$（'#inputFileForm'）.html（“”）；
$（'#inputFileForm'）。追加(
//  
$（“”）.attr（'type'，'file'）.attr（'name'，'file'）.class（“btn btn sm btn默认值”）
);

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

var input = $("#fileUploader");

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

---

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

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

var input = $("#fileUploader");

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

---

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

我将暂时跳出框外，使用FormData（）对象为您的问题提供解决方案。它将多个文件存储为一个键/值。您需要确保您的目标受众能够支持它（查看参考资料）。根据MDN

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

首先，您需要实例化对象以存储文件。我们将创建一个新的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
}

现在，每次需要提交时，只需实例化一个新的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!
      }
    }
   });
});

$（文档）.ready（函数（）{
$（“#mySubmitBtn”）。在（“单击”，函数（）{
var myInput=document.getElementById（“文件上传程序”）；
对于（i=0；i

---

同样，这完全是另一种方法，但它允许您完全控制发送到服务器的文件，而不必担心IE/Chrome/FF的不一致性和文件输入类型的重置。如果你想看一个例子，我有一个半可读的脚本，你可以看看。

我将跳出框框，用FormData（）对象为你的问题提供一个解决方案。它将多个文件存储为一个键/值。您需要确保您的目标受众能够支持它（查看参考资料）。根据MDN

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

首先，您需要实例化对象以存储文件。我们将创建一个新的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
}

现在，每次需要提交时，只需实例化一个新的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!
      }
    }
   });
});

$（文档）.ready（函数（）{
$（“#mySubmitBtn”）。在（“单击”，函数（）{
var myInput=document.getElementById（“文件上传程序”）；
对于（i=0；i

---

同样，这完全是另一种方法，但它允许您完全控制发送到服务器的文件，而不必担心IE/Chrome/FF的不一致性和文件输入类型的重置。如果你想看一个例子，我有一个半可读的脚本，你可以看看。

我想你最好解释一下其他每个方法是如何失败的。我认为你再次发布页面时使用的是以前发布的相同数据，而不是页面上当前显示的数据。F5和刷新发布最初用于访问该页面的内容。更多信息：@JohnBoker Yes。我同意。我确实按F5发帖，但为什么

不是空的？@ClarkKent:就像John说的，它发出的是原始请求，在你刷新时生成了页面。这并不是说它“将其保存在内存中”，而是重新提交它最初提交时附带的所有旧post数据，如果其中包含一个文件，则该文件将重新加载并重新连接。这就是为什么您应该遵循POST/Redirect/GET（）的一个重要原因