javascript - 我可以使用 JavaScript/JQuery 将上传的文件添加到 ASP.NET 中的 Request.Files 吗？

Question

我不完全确定如何使用 JavaScript 将文件添加到 Request.Files 中？这就是我要做的……

var x = $('input[type=file]:eq(0)');

//Add the data to the hidden field
hiddenField.val(x.val());

//Add the html display
fileDisplayDiv.innerHTML += "<a href='#' class='filename'>display name</a>";

//Add this file to request.files
How to do???

//Clear the input so the user may add more files before postback.
x.val("");

输入是一个普通的 HTML 输入。是的，最终我正在尝试开发一个多文件上传(这就是我清除输入字段的原因)——我查看了第 3 方的东西，但我需要为我正在做的事情定制功能。我认为这项任务似乎是可行的，否则 ajax uploader 将如何工作？

感谢任何帮助，提前致谢。

Answer 1

我将提供一个我倾向于使用的 pre-HTML5 方法。这有一些缺点，但有很多优点 - 主要的一个是它几乎完全跨浏览器(唯一的要求是 JavaScript 和隐藏的 IFRAME)。

我会立即列出缺点，以便您准确了解可能遇到的问题:

• 如果您发布到另一个域，您将无法从中获得返回
• 除了内容之外，您无法获得任何其他内容，HTTP 错误会导致它静默失败。
• 如果失败，您将不得不重新生成表单。如果发生这种情况，您将无法自动为用户重新选择文件。

解决方案:将您的 input type="file"放在一个友好的 IFRAME 中并使用它来提交。它不是 AJAX，是一种相当古老的方法，但它确实有效。

如何

第 1 步。创建一个 IFRAME 并为其指定一个 ID 或类，以便能够有效地选择它。在 DOMReady 上创建它，而不是弄乱预先准备好的东西。创建它时，使用 $('#yourIframe').load(function() { }); 为其分配加载事件。当它触发时，您将知道您现在可以将内容添加到您的 iframe。诀窍是将所有表单元素复制到它，并留下“克隆”——并将所有有用的事件绑定(bind)到 IFRAME 中的事件。按顺序:

• click() and change() for input type="file", input type="text"并选择
• change() 其他的

点击事件应该简单地转发到 IFRAME 中的元素。 change() 事件绑定(bind)到 IFRAME 中的元素时，允许您恢复文件的名称。

当您单击您的虚拟提交按钮时，让它绑定(bind)一个 load() 事件到 IFRAME，然后在 IFRAME 中提交表单。提交表单后，您将能够使用 $("body",$(this).contents()).

访问负载处理程序中 iframe 的内容

我写了一个 fiddle 来说明:http://jsfiddle.net/WQhnM/2/ .请记住，JSFiddle.net 将获取数据(所以不要发送任何太严重/有罪的东西;-))并且他们的服务器拒绝任何大于 100kb 的东西(所以发送小的东西)。不过，这个想法就在那里。我让 IFRAME 可见，这样您就可以看到发生了什么。

到目前为止，这不是一个很好的解决方案，但在 IE catch HTML5 之前它一直有效。

编辑:我忘了提及 - 这需要 hack 才能在 IE7 中工作。 change() 在此特定浏览器中未正确触发。解决方案:

if (!$.browser.msie) {
  nItem.change(function() { ... });
}
else {
   nItem.click(function() { 
      setTimeout(function() {
          (function() { ... });
      },0);
   });
}