如何使用 FileReader API 从 url 上传图像文件？答案

【问题标题】：how to upload image file from url using FileReader API?如何使用 FileReader API 从 url 上传图像文件？
【发布时间】：2014-01-21 03:10:49
【问题描述】：

在 html 表单中，我们有一个图像字段，用于上传文件。我遵循http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api 的教程，从本地磁盘上传图像文件时效果很好。

但是假设我有一个图片 url 说 http://www.google.com/images/logos/ps_logo2.png 并且想从远程 url 上传这张图片，而不是从本地磁盘上传。

FileReader API 在尝试从本地磁盘上传图片时运行良好，但我们如何使用它通过 url 加载图片？

创建base64 的图像并通过在图像字段中设置为<img src='data:image/png;base64,iAks4ds__base64__string' id='user_img'> 将其用于预览很容易，但是使用jQuery 或JavaScript 从远程URL 上传图像应该采用什么工作流程？

我该怎么办？有什么建议吗？

【问题讨论】：

为什么不直接用 curl 之类的把它放到服务器上。
可能重复：stackoverflow.com/questions/5420384/…
我同意使用 curl。我的方法是使用拖放（例如：stackoverflow.com/a/11973398/1798697），检索 URL 并将 URL 提交到服务器（而不是实际的文件数据）。当服务器获得一个 URL 时，它使用 curl（或 w/e x-server 的东西）来获得它自己的副本。

标签： javascript jquery html filereader

【解决方案1】：

FileReader API 专用于本地文件（参见http://www.html5rocks.com/en/tutorials/file/dndfiles/）

如果您想从远程 URL 下载图像并在 javascript 中提取其数据，您可以使用 Image 和 Canvas 元素，如以下问题所述：Convert an image into binary data in javascript

【讨论】：

那行不通了。 SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': tainted canvases may not be exported.
我不想知道这个安全限制。谢谢分享。

【解决方案2】：

正如@fiddler 回答所说，fileReader 仅用于本地文件，如果您需要从远程 url 获取图像之类的东西，那么您可以采用另一种方法

1) using Http Get request
2)using Canvas features

但是由于安全威胁，浏览器不允许脚本进行跨域请求，只有 DOM 本身可以做到。可以解决

1) Cors（跨域资源共享）?
2) jsonp?

现在你很好奇cors or jsonp

如果您可以访问存在远程事物的服务器，则可以执行服务器端 cors ?，这是大多数人推荐的。

但是作为寻找可以处理任何远程资源的解决方案的问题，cors proxy ? 可以帮助您
free cors proxies

【讨论】：