javascript - 如何上传文件到服务器 : Multiple Files and Custom UI

Question

我正在尝试实现一个 UI，让最终用户在自定义 UI 上将多个文件上传到服务器 - 几乎与 GMail 或 Outlook.net 的做法相同。

节点的一些东西:

1. <input type="file">很丑陋 - 而且不标准(IE 在文件名左侧显示一个名为“浏览”的按钮。Chrome 在文件名右侧显示一个名为“选择”的按钮)。
2. 大多数关于如何操作 UI 的建议建议使用 opacity=0 隐藏输入文件元素。 ，但在自定义 UI 之上。 'click' 事件将打开对话框，返回时文件名(不带路径)将作为 $('#file').val() 提供。参见 this问题，以及关于 jsfiddle 的样本.
3. 我也知道 HTML5 有一个 multiple="multiple"现在属性，这将让用户选择多个文件。
4. 但是，我正在寻找一个多文件解决方案，它可以在 IE8 及更高版本(以及 WebKit、Mozila)上运行。
5. 有人建议 Google 使用 Flash。这不是真的。他们的多文件上传在禁用 Flash 时正常工作。

现在，这是我最大的惊喜:在 IE 和 Chrome 上使用开发人员工具 (F12)，同时查看 GMail 和 Outlook.NET - 这两种实现都没有 <input type='file'>树中的元素(据我所知)。此外，这两种实现都适用于 IE8(禁用 Flash)。

这是怎么回事？他们是怎么做到的？

编辑:为什么我认为他们不使用文件输入元素？打开开发者工具(F12)，切换到控制台，输入:document.getElementsByTagName('input') .有 24 个输入元素，其中 19 个是 type=hidden，没有一个是 type=file。

编辑 2:感谢所有回复者和评论员。确实-下面的“没有其他方法”论点(评论中)是有效的。事实证明，Outlook.NET 和 GMail 都会有一个 <input type='file'>。元素，它们将动态添加，仅当用户单击“附加文件”按钮时。然后，他们将向元素发送“点击”事件，这将触发选择文件对话框。

见证这一点，使用 F12 开发工具(在 Chrome 或 IE 中)，并在交互式控制台中键入:document.querySelectorAll('input[type=file]')。请注意，在这两种实现中，元素都是 body 的直接子元素(display=none)。

他们不使用 iframe 进行上传(与下面唯一的答案不同)，但现在可以使用 HTML5 中的简单 XHR 代码上传。

Web 上有关如何执行此操作的最佳资源是:https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications .我已经完成了下面@Jay 的步骤(很棒)，但是 Mozilla 页面更简单，这是我的建议。另外，快速查看 @Niranjan 评论中的 jsfiddle 示例。

Answer 1

我最近为一个旧的 asp.net 网站实现了一个多文件上传 UI，但概念应该是相同的。

我不是很擅长写(总结代码)，但这里是。

1. 创建多个 IFrame。由于安全限制，我在加载文档后尝试编写 IFrames 时遇到了问题，因此服务器呈现了尽可能多的内容，尽管用户会一次使用。

2. 添加一个“上传”按钮和处理程序，它首先向其中一个 iframe 添加一个 load 处理程序。

   var frame = $('iframe:first');

在框架加载处理程序中---

frame.load(function () { /* all the code below* /});

2.a.像这样将文件的输入标签和你喜欢的任何其他元素写入框架

frame.contents().find('body').html("html goes here");

2.b.现在向框架中的文件输入添加一个处理程序并提交该表单:

frame.contents().find('#fileUpload').change( /*submit the form */)

2.c。现在调用文件上传对话框

frame.contents().find('#fileUpload').click();

2.d.现在该行将阻塞，直到对话框返回。当它发生时，您必须检查文件上传控件的值是否为 null，以防它们取消。这是我将 iframe 标记为未使用的地方。

2.e.以太方式你需要从 iframe 的负载中解除绑定(bind)并重新绑定(bind)到将处理返回(上传完成)的不同方法

frame.unbind('load');
frame.load(function () { /* handle file uploaded */})

2.e.1。这是我向用户报告成功并发布框架以便可以重复使用的地方。

2.e.2。最后从上传完成方法再次解除加载

所有这些都在您的框架加载处理程序

中

3.现在加载框架

frame.load();

至少我是这样做的。我将所有文件上传到一个处理程序，该处理程序报告文件 % 并且父页面内的循环触发了 ajax 获取并显示每个文件的进度。

主要思想是，如果您想以“ajax”风格上传多个文件，但不使用 flash 或 Html 5，则需要使用一组 iframe 和一些花哨的脚本。

希望这对您有所帮助。