通过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响应说＆LT;消息＆GT;没有图像数据被发送到上传API＆LT; /消息＆GT; （其中，我认为，是由于这样的事实，我无法发送的文件对象作为一个所谓的形象）的参数，如文档描述：

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屋！