无法在 IE10 中使用 XmlHttpRequest 加载 Blob答案

【问题标题】：Cannot Load Blob using XmlHttpRequest in IE10无法在 IE10 中使用 XmlHttpRequest 加载 Blob
【发布时间】：2013-06-13 09:23:54
【问题描述】：

我尝试从同一域内的图像路径（http 路径）加载图像，我一直在使用的方法是 XmlHttpRequest，它在 Chrome 上正常工作，然后我在 HTML5 中的 img 标签内显示了图像，

当我尝试在IE10中加载它时，它不起作用，状态和readyState都正常，但是图像不会加载，当我检查 XmlHttpRequest 属性“响应”时，它在 Chrome 上返回了 blob 对象，但在 IE10 上返回了 undefined，

注意 ：我在 Chrome 上使用了 onload 事件，但在 IE 上我使用了 onreadystatechanged

这是我正在使用的代码：

           var xhr = new XMLHttpRequest();
           xhr.open("GET", "http://pathtomyimage/example.jpg", true);
           xhr.responseType = "blob";
           xhr.onreadystatechange = function (e) {
               if (xhr.readyState==4 && xhr.status==200) {
                   alert(xhr.response+" in IE");
                   var i;
                   i= document.getElementById("bg");
                   i.src = URL.createObjectURL(xhr.response);
               }
           };
           xhr.onload = function (e) {
               if (this.status == 200) {
                   var myBlob = this.response;
                   alert(myBlob+" inChrome");
                   var i;
                   i= document.getElementById("bg");
                   i.src = URL.createObjectURL(myBlob);
               }
           };
           xhr.onerror = function (e) {
               alert(e+"  error");
           };
           xhr.send();

在onreadystatechange里面，IE10上的alert返回undefined，而onload里面的alert在Chrome上是返回blob-object，那么如何像在 Chrome 上一样在 IE10 上显示图像呢？

【问题讨论】：

您为什么要发出 Ajax 请求来获取图像，而不仅仅是链接到图像？
因为我需要将它存储在IndexedDB或某种存储中，并且由于我有同步过程而动态更改了路径，总之我需要将图像作为Blob获取
图片显示只是为了测试获取的blob是否真的存在和正确
只需为您的代码创建一个JsFiddle，但更改网址。有效。您使用的是 IE10 标准文档模式吗？
@VitorCanova 当你说标准文档模式时，我立即检查了我的 IE，终于看到它在它的兼容性视图中，这就是为什么响应未定义，它现在工作正常，谢谢！

标签： javascript html xmlhttprequest blob

【解决方案1】：

我在JsFiddle 中尝试了您的代码，但更改了网址并且它有效。

xhr.open("GET", "http://fiddle.jshell.net/js/lib/dummy.js", true)

您可能没有在标准模式下使用 IE。

按 F12 看看那些东西：

Browser Mode: IE10

Document Mode: Standards

【讨论】：