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

Question

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

但是假设我有一个图片网址，请说http://www.google.com/images/logos/ps_logo2.png并希望从远程网址上传此图片，而不是从本地磁盘上传。

尝试从本地磁盘上传图像时， FileReader API运行良好，但我们如何使用它来按网址加载图像？

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

我怎么能够？ 有什么建议？

Answer 1

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

如果要从远程URL下载图像并在javascript中提取其数据，可以使用Image和Canvas元素，如以下问题中所述： 在javascript中将图像转换为二进制数据

Answer 2

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

1） 使用Http Get请求
2） 使用Canvas功能

但由于安全威胁，浏览器不允许脚本执行跨源请求，只有DOM本身才能这样做。 这可以解决

1）Cors（跨源资源共享） ？
2）Jsonp ？

现在你好奇所以cors或jsonp

如果你有权访问存在远程事物的服务器，你可以做服务器端的cors 吗？ ，这是大多数人推荐的。

但是作为寻找可以处理任何远程资源的解决方案的问题，cors代理？ 帮你
免费的角色代理