通过Javascript跨域XHR上传 [英] Cross-Domain XHR uploading via Javascript
问题描述
可能重复:
解析在IE9 XML / JSON响应
Possible Duplicate:
Parsing xml/json response in IE9
我想用Imgur API来实现一个Javascript上传(我认为这是一个使用#1)。但是,我没有能够使它发挥作用。我想阿贾克斯上传但我得到了请求头字段的X请求 - 由于不被访问 - 不允许控制 - 允许 - 头。奇怪的是,我用这插件,我没有得到这个错误。相反,我得到了一个XML响应说<消息>没有图像数据被发送到上传API< /消息>
(其中,我认为,是由于这样的事实,我无法发送的文件对象作为一个所谓的形象)的参数,如文档描述:
I want to implement a Javascript uploader using Imgur API (I think that's the one Stackoverflow uses). However, I haven't been able to make it work. I tried Ajax Upload but I got "Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers". Strangely enough, I used this plugin and I didn't get that error. Instead, I got an XML response saying <message>No image data was sent to the upload api</message>
(which, I think, was due to the fact that I couldn't send the file object as a parameter called 'image'), as described in the documentation:
图像|需要| POST |一个二进制文件,Base64编码数据,或URL
image | required | POST | A binary file, base64 data, or a URL
所以,我一般的问题是:什么是上传到Imgur最简单的方法(考虑到他们允许跨域XHR,这是一个很大的优势)在一个跨浏览器(IE8 +,Chrome浏览器,Firefox和朋友)的方式?
So, my general question is: What is the easiest way to upload to Imgur (considering that they allow Cross-Domain XHR, which is a big advantage) in a cross-browser (IE8+, Chrome, Firefox and friends) way?.
我也看过一些关于 HTML5的FORMDATA对象,但似乎即使是现在,跨浏览器的支持是不是伟大的,我不知道是否有JavaScript实现的IE8 +,Safari浏览器等。
I also read a bit about HTML5's FormData object, but it seems that even now, cross browser support is not great and I'm not sure if there are javascript implementations for IE8+, Safari, etc.
更新:我设法得到这个(几乎)使用jQuery插件形式工作,但我仍然有的这个(与IE9)的问题。也许这是有关解决这一问题,这反过来,将解决另外一个。
UPDATE: I managed to get this (almost) working using Jquery Form Plugin, but I still have this problem (related to IE9). Maybe that's relevant to solve this question, which in turn, would solve the other one.
UPDATE2:以供将来参考,jQuery的表格插件工作正常。然而,有一个问题解析其中包含的所有相关从Imgur数据的XML响应。请参阅解析在IE9 XML / JSON响应的进一步有关此问题的信息。简而言之:JSON是不是一种选择,XML应该工作,但事实并非如此。您可以尝试服务器端脚本来代替,通过AJAX请求发送到服务器端脚本,让你的脚本发送上传并正确接收响应。为了不发散注意力从真正的问题,我将关闭这个问题。
UPDATE2: For future reference, Jquery Form Plugin works fine. However, there is a problem parsing an XML response which contains all the data relevant from Imgur. Please refer to Parsing xml/json response in IE9 to further information about this issue. In short: JSON is not an option, XML should work but it doesn't. You can try server side scripting instead, sending the request via AJAX to a server-side script and letting your script send the upload and receiving the response correctly. In order not to diverge attention from the real issue, I will close this question.
任何帮助将是很大的AP preciated。
Any help would be greatly appreciated.
推荐答案
有一个在的 Imgur API文档。
function upload(file) {
// file is from a <input> tag or from Drag'n Drop
// Is the file an image?
if (!file || !file.type.match(/image.*/)) return;
// It is!
// Let's build a FormData object
var fd = new FormData();
fd.append("image", file); // Append the file
fd.append("key", "API_KEY"); // Get your own key: http://api.imgur.com/
// Create the XHR (Cross-Domain XHR FTW!!!)
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://api.imgur.com/2/upload.json"); // Boooom!
xhr.onload = function() {
// Big win!
// The URL of the image is:
JSON.parse(xhr.responseText).upload.links.imgur_page;
}
// Ok, I don't handle the errors. An exercice for the reader.
// And now, we send the formdata
xhr.send(fd);
}
这篇关于通过Javascript跨域XHR上传的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!