使用 HTML5 File API 读取存储在某个 URL 上的文件答案

【问题标题】：Read File stored on some URL using HTML5 File API使用 HTML5 File API 读取存储在某个 URL 上的文件
【发布时间】：2014-07-14 22:49:31
【问题描述】：

我正在使用 HTML5 文件 API 将文件上传到我的网络应用程序。

我的网页上有一个输入元素，我使用它读取文件并调用上传功能

<input type="file">

$('input[type="file"]').on("change",function(e){
      console.log(this.files);
      // upload each file in this.files
});

这非常适用于操作系统上的本机文件。我现在想上传远程文件，例如 example.com/blah/file1.jpg 我的问题是如何使用 File API 读取这个文件？有什么办法吗？

【问题讨论】：

【解决方案1】：

您可以通过XMLHttpRequest 下载远程文件，并将它们处理为Blob。然后将其上传到另一台服务器。上传必须超过XMLHttpRequest。它依赖于浏览器对 XHR Level 2 的实现。此链接包含您需要的代码 sn-ps：

它同时具有 sn-ps 用于将远程文件下载为 Blob 并将 Blob 上传到服务器。

【讨论】：

感谢老虎，它就像一个魅力，除了当我说 var blob = new Blob([this.response], {type: 'image/png'}); 时我丢失了所有元数据。这样做后如何获取文件名？
@sublime：如果我们通过网络检索文件，我认为没有“文件名”。说它是/download?id=1234，根本没有文件名。因此，您需要设置自己的有关获取文件名的规则。您可以按照大多数浏览器的做法： 1. 取 URI 路径的最后一部分，并将其视为文件； 2.如果响应头中存在content-disposition，则按照标准使用其中的内容作为文件名。
谢谢，最后一个问题：我得到的一些图像 url 是 base64 编码的数据字符串。 data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ... 在这种情况下，浏览器会抛出错误，提示 XMLHttpRequest 无法加载 data:image，跨源请求仅支持 HTTP。如何下载这些图片？
没关系，我发现这个关于如何将 dataURI 转换为图像 blob stackoverflow.com/questions/4998908/…