2

我不完全确定如何使用 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 上传者将如何工作？

任何帮助表示赞赏，在此先感谢。

4

2 回答 2

1

您需要支持较旧的浏览器吗？

传统上没有办法使用纯 javascript/ajax 上传文件。出于安全原因，对控件的 javascript 访问<input type="file" />受到限制（否则您可能会欺骗浏览器上传用户计算机上的任何文件）。第三方上传控件使用 Flash 来解决这些限制，如果需要支持旧版浏览器，这仍然是唯一真正的解决方案。

HTML5 提供了两个新功能，可以帮助您实现您想要做的事情：

  • File API：允许您在本地做很多很酷的事情，例如选择多个文件、列出选定的文件和显示文件信息（所有客户端）。
  • 使用 AJAX 上传文件。您现在可以纯粹使用 XMLHttpRequest 对象将文件或任何 blob 数据发送回服务器。

我自己还没有尝试过后者，但我相信您应该能够使用 ASP.NET 的Request.Files[]对象访问上传的文件（如果您尝试，请告诉我们！）。这些功能并未得到普遍支持，最重要的是 IE 8/9 缺乏对上述大部分功能的支持。因此，如果您需要支持这些浏览器，最好的办法是使用第三方上传控件之一。

于 2012-11-26T20:25:22.370 回答
1

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

我将立即列出缺点，以便您确切了解可能遇到的问题：

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

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

如何

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

  • click()change()对于输入类型=“文件”，输入类型=“文本”并选择
  • change()其他任何事情

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

当您单击幻像提交按钮时，让它绑定一个load()事件到 IFRAME，然后在 IFRAME 中提交表单。提交表单后，您将能够使用 $("body",$(this).contents()) 访问负载处理程序中 iframe 的内容。

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

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

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

if (!$.browser.msie) {
  nItem.change(function() { ... });
}
else {
   nItem.click(function() { 
      setTimeout(function() {
          (function() { ... });
      },0);
   });
}
于 2012-11-26T20:54:24.687 回答