如何使用FileReader API从url上传图像文件?
在html格式中,我们有一个图像字段,用于上传文件。 我从http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api上学习了教程,从本地磁盘上传图像文件时效果很好。
但是假设我有一个图片urlhttp://www.google.com/images/logos/ps_logo2.png,并希望从远程url上传此图片,而不是从本地磁盘上传。
尝试从本地磁盘上传图像时, FileReader
API运行良好,但我们如何使用它来按url加载图像?
通过将图像字段设置为轻松创建
base64
图像并将其用于预览,但是应该采用哪种工作流来上传图像使用jQuery或JavaScript的远程URL?
我怎么能够? 有什么建议?
FileReader
API专用于本地文件 (参见http://www.html5rocks.com/en/tutorials/file/dndfiles/ )
如果要从远程URL下载图像并在javascript中提取其数据,可以使用Image
和Canvas
元素,如以下问题中所述: 在javascript中将图像转换为二进制数据
正如@fiddler的回答所说, fileReader仅用于本地文件,如果你需要从远程url获取图像,那么你可以采用另一种方法
1) 使用Http Get请求
2) 使用Canvasfunction
但由于安全威胁,浏览器不允许脚本执行跨源请求,只有DOM本身才能这样做。 这可以解决
1)Cors(跨源资源共享) ?
2)Jsonp ?
现在你好奇所以cors或jsonp
如果你有权访问存在远程事物的服务器,你可以做服务器端的cors 吗? ,这是大多数人推荐的。
但是作为寻找可以处理任何远程资源的解决方案的问题,cors代理? 帮你
免费的角色代理