在浏览其他页面时上传多个文件 - 如何？答案

【问题标题】：Upload multiple files while navigating other pages - howto?在浏览其他页面时上传多个文件 - 如何？
【发布时间】：2012-07-16 04:39:58
【问题描述】：

我正在创建一个网站，我希望允许用户在浏览网站时上传多个文件。

上传完成后，最好触发 Javascipt 事件，以允许用户指定与上传文件相关的其他信息（例如照片位置、标签等）无论如何，所需的功能是：

一个上传操作允许多个文件
显示可选的进度指示器（至少以“上传 x 个文件”的方式）
这样做不会将用户绑定到单个页面

如何实现这些功能？非常感谢任何建议！

编辑

如果使用弹出窗口处理上传，我该如何：

通知用户（在“主”页面上）上传已完成，或者出现错误？
（更重要的是）将 $_FILES 数组传递给弹出窗口？我希望用户能够单击主窗口上的“上传”，或者无论如何从主窗口开始上传（例如在主窗口上拖放文件）。

【问题讨论】：

我认为用户必须留在页面上才能完成上传，如果用户导航到不同的页面，上传将停止......一种方法是使用隐藏框架的框架上传文件，另一个框架将用于导航..
@qxxx 那样的话，用户换页时，网址栏里的网址可以改变吗？
大多数使用此功能的网站实际上并没有将浏览器从页面上移开，而是使用 Ajax 在同一个窗口中动态显示页面。字面上保持在同一页面上。
你可以使用共享网络工作者吗？
@starbeamrainbowlabs 是的，但我从来没有使用过，所以也许你可以发布一个答案，建议如何:)

标签： php javascript file-upload asynchronous

【解决方案1】：

由于导航站点会切换页面，并且您的站点上不太可能有完整的 ajax 导航，因此在第二个弹出窗口中上传文件可能会有所帮助。不过，不确定如何（如果）实现它，但由于您需要一次上传多个文件，恐怕您一定会使用闪存。

编辑

所以解决方案可能如下所示：

当用户单击“选择文件”按钮时，您会弹出一个新窗口，他可以在其中实际选择文件（如果需要上传多文件，则通过 Flash）。并通知上传进度使用postMessage。虽然在这种情况下为postMessage isn't going to work in IE，但您可能会以某种方式将消息发送到服务器并从服务器返回到页面。

另一个疯狂的想法是不使用弹出窗口，而是让用户首先选择她所在页面上的文件，但是一旦用户选择了文件，则使页面上的所有链接target=_blank进行任何后续导航发生在另一个选项卡中。我知道这是 hacky 并且不完全是用户友好的，但可能会有所帮助。

在任何情况下，我都会事先通知用户，在这两种情况下都会出现一个新窗口。

EDIT2

还有一个更疯狂的想法。当用户选择文件并单击链接时，创建一个 iframe，它将覆盖整个页面并将原始页面隐藏在其下方并使链接在 iframe 中打开。但它看起来更加骇人听闻，而且看起来你会遇到很多麻烦。

【讨论】：

+1，我认为弹出窗口可以解决问题，因为它被认为是另一个没有重新加载的页面，任何 ajax/flash/etc 都可以在那里运行。
我不确定是否可以将用户选择的文件传递到弹出窗口，除非用户选择其中的文件。
首先：疯狂的想法并不邪恶。许多日常事物都是从疯狂的想法中诞生的。第一个疯狂的想法是可行的，我想我会尝试一下，看看它是如何工作的。第二个有两个大问题：网址栏会一直显示旧页面的网址，永远不会更新，如果有人重复上传点击多次，客户端浏览器会占用大量内存，最终速度变慢导航
只是想通知 IE 用户上传进度，您只需更改页面标题即可。
我喜欢第一次编辑中的“另一个疯狂的想法”。在我看来，操作 DOM 元素上的属性以打开新窗口/选项卡并不难。也许更改标题以说明文件正在上传，以便用户知道正在发生的事情。然后在上传完成后，将该窗口重新聚焦。 :)。