Question

我正在尝试执行以下操作：

向用户显示包含大量文件的网格
用户选择他想要的文件数
应提示用户输入目标位置的每个文件
应逐个下载每个文件

我无法找到一个好的解决方案，因为：

我需要一个跨浏览器解决方案（没有插件），但我可以依赖IE10 +和HTML5
不应将文件下载为zip文件或任何其他存档
使用document.write插入多个iframe感觉很糟糕，大多数浏览器都不鼓励

Answer 1

我设法构建了一个使用HTML FileSystem API下载多个文件的可能示例。我在构建这个问题时遇到了一些问题，我将在下面记下这些问题。请注意，这只是一个示例，可以通过很多方式进行改进（代码方面和功能方面）。

我停止了开发，因为我无法传输二进制文件，但也许有人可以给我一个如何做到这一点的线索。（我现在正在努力使用二进制ajax传输和JSON。（我不能说它是否可以在ajax上传输图像/二进制文件）。

在GitHub上发布的源代码： https://github.com/posixpascal/FileSystem-API-Example

需要注意的一些事项：

您的用户点击“允许此网页下载多个文件＆＃39;一旦弹出窗口可见。否则它就无法工作。
这在服务器端使用繁重的I / O操作（至少使用我的码）。在使用这个脚本之前，应该重写一下。
请注意以下问题：https://code.google.com/p/chromium/issues/detail?id=94314 Windows用户名中包含非拉丁字符的用户无法下载文件。
如果使用TEMPORARY FileSystem Storage，则无法恢复下载。（当我尝试访问下载的文件两次时，Chrome在我的计算机上引发错误）
还要注意循环，因为它可以阻止其他人的浏览器。
1. Youtube示例：https://www.youtube.com/watch?v=F9T4i4qrYtc&list=UUi1sRIczZxhsuWPPUK7xxTA
2. 直播示例：http://pascalraszyk.de/_broken_do_not_use/

我只能说，目前这不是一个解决方案，而且API还没有为大众做好准备。您可以使用Flash和其他工具来补充进一步的支持，以补偿缺少FileSystem API支持。

工作原理：

用户点击下载链接后，我的脚本会立即使用服务器端PHP脚本收集有关文件的信息。之后它会请求几个块，直到本地存储文件的文件大小与php脚本发送的文件大小相匹配。

一旦文件准备就绪，我创建一个不可见的标签并将href设置为＆＃34; filesystem：myurl.de/theFile"并在该链接上触发click事件。我还添加＆＃39;下载＆＃39;属性因此浏览器也被迫下载.txt文件。

这不是您问题的完全解决方案，但您可以检查源代码，并希望根据您的需求构建一些东西。我猜你已经开始采用不同的方法来下载多个文件。

Answer 2

我找到了一个适用于所有浏览器的解决方案（对我而言）。它在代码方面感觉不太好（起初）但在不同的浏览器和不同的机器上看起来相当稳定。

Chrome会要求用户允许该网站下载多个文件。 IE根本不关心。

var onDownload = function(){
       var docs = module.getSelectedElements();        

       for(var i = 0; i < docs.length; i ++) {
           (function(){
               var doc = docs[i];
               window.setTimeout(function(){
                  $jq("#downloadIframe").attr("src", doc.url);
               }, i * 500);
           })();
       }

};

将多个文件一个接一个地发送给用户进行下载

2 个答案:

需要注意的一些事项：

工作原理：