1

我以为这个问题已经解决了，但不幸的是它没有解决，尽管这次似乎是一个不同的问题。

我想通过跨域 XHR 使用 imgur API 照片共享服务，显然，它工作正常。我开始一个请求，他们发送一个 xml，我需要做的就是处理它。但是，尽管有多个建议（适用于 Chrome、Firefox），但我无法在 Internet Explorer 9 中正确执行此操作。这是我尝试过的最简单的代码：

HTML：

<!DOCTYPE html>
  <html>
    <body>
    <form id="uploadForm" action="http://api.imgur.com/2/upload.xml" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="key" value="00ced2f13cf6435ae8faec5d498cbbfe"/>
    File: <input type="file" name="image"/>
    Return Type: <select id="uploadResponseType" name="mimetype">
    <option value="xml">xml</option>
    </select>
    <input type="submit" value="Submit 1" name="uploadSubmitter1"/>
    </form>
    <div id="uploadOutput"></div>
    </body>
  </html>

在那里您可以看到 Imgur API 的密钥（如果需要，您可以使用它......它仅用于测试目的，但我不认为收到的 xml 响应有任何问题）。

我正在使用Jquery Form Plugin来管理文件上传。

XML:

这是我测试过的最简单的一段代码。通常，我们需要帮助 Internet Explorer 独立解析 xml，这就是我有 parseXml 的原因。

Javascript：

function parseXml(xml) {  
  if (jQuery.browser.msie) {  
    var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");  
    xmlDoc.loadXML(xml);  
    xml = xmlDoc;  
  }  
  return xml;  
} 

$('#uploadForm').ajaxForm({
    dataType: ($.browser.msie) ? "text" : "xml",
    accepts: {
        xml: "text/xml",
        text: "text/xml"
    },
    // has been received
    success: function(data) {
        $('#uploadOutput').html('Submitting...');
        data = parseXml(data);
        console.log(data);
        alert(data);
    },
    complete: function(data) {
        $('#uploadOutput').html('Complete...');
     }
});

dataType: ($.browser.msie) ? "text" : "xml"据说告诉 IE 返回一个文本响应。尽管有所有这些保证，Content Type但响应是application/xml（有人告诉我这不是问题）。作为一个 xml 我收到这个：

<?xml version="1.0" encoding="utf-8"?>
<upload><image><name/><title/><caption/><hash>087Y0</hash><deletehash>gUcgywjXoJyAJp6</deletehash><datetime>2012-06-02 21:59:35</datetime><type>image/jpeg</type><animated>false</animated><width>1024</width><height>768</height><size>297623</size><views>0</views><bandwidth>0</bandwidth></image><links><original>http://i.imgur.com/087Y0.jpg</original><imgur_page>http://imgur.com/087Y0</imgur_page><delete_page>http://imgur.com/delete/gUcgywjXoJyAJp6</delete_page><small_square>http://i.imgur.com/087Y0s.jpg</small_square><large_thumbnail>http://i.imgur.com/087Y0l.jpg</large_thumbnail></links></upload>

我认为它看起来不错，我可以在其他浏览器中使用类似的东西解析它$($.parseXml(xml)).find('original').text()，但不能在 IE9 中解析。所以基本上，我收到了回复，但我无法解析那个 xml，尽管当我试图弄清楚我在 IE 中得到了什么时，看起来我什么也没得到。

此外，success甚至没有触发，这是 IE9 无法解析 xml 的信号。complete正在射击，但它没有收到任何内容data。那么我做错了什么？

在这里你可以有一个小提琴（包括 Jquery Form Plugin）。

更新：

JSON

为了将来参考，在这种情况下，JSON 将无法使用 Jquery Form Plugin。从文档中：

The iframe element is used as the target of the form's submit operation 
which means that the server response is written to the iframe. This is fine 
if the response type is HTML or XML, but doesn't work as well if the response 
type is script or JSON, both of which often contain characters that need to 
be repesented using entity references when found in HTML markup. To account 
for the challenges of script and JSON responses when using the iframe mode, 
the Form Plugin allows these responses to be embedded in a textarea element 
and it is recommended that you do so for these response types when used in 
conjuction with file uploads and older browsers.

想法？

谢谢！

4

1 回答 1

0

这是由于跨域安全性，称为同源策略。

如果浏览器实现了这个插件（例如在 Chrome 中），这个插件就会使用 File API，如果没有，它会使用一个巧妙的技巧来创建一个隐藏的 iframe 并将数据发布到它。如果地址在另一个域上，插件无法从 iframe 中获取数据，因此会失败。

尝试使用：启用插件的调试模式，$.fn.ajaxSubmit.debug = true;您将看到幕后发生的事情。

不幸的是，上传的唯一方法是在您的 HTML 中使用隐藏的 iframe，而不是由脚本添加，并通过iframeTarget使用此 iframe 的选择器传递参数来强制发布到它，但您将无法获取响应，由于上面提到的问题（我不知道为什么插件生成的iframe不发布数据）：

JS：

$('#uploadForm').ajaxForm({
    iframeTarget: ($.browser.msie) ? "#iframeTarget" : false,
    ...

HTML：

<iframe name="iframeTarget" id="iframeTarget">This iframe can be hidden with CSS</iframe>

您还可以使用条件注释来隐藏 iframe 对其他浏览器：

<!--[if IE]>
<iframe name="iframeTarget" id="iframeTarget">This iframe can be hidden with CSS</iframe>
<![endif]-->

需要注意的是success回调不会触发。

编辑：

您正在与此站点通信的JSON响应选项吗？

如果有，您可以将jsonp其用作dataType参数，添加?callback=someFunction到 url 的末尾并编写someFunction(data){}接收数据并以与success回调相同的方式解析它的内容。

于 2012-06-03T03:42:14.733 回答