处理来自XMLHttpRequest的图像(使用HTML和Javascript)

我正在使用XMLHttpRequest从服务器获取图像(从第三方服务器小程序本地运行)

代码的简化版本如下所示.

图像以JPEG格式返回,返回的标题显示“content-type = image / jpg”.我可以通过Firebug for Firefox查看信息.

但是我有一个糟糕的时间能够在网页上显示实际图像,因为它是从服务器返回的图像数据而不是图像位置的uri.

从返回的数据中显示此图像的正确方法是什么？我应该使用< span>标签或< img>标签或< magical-show-image-from-data>标签？

function getXML(url,postData,requestStateChangeHandler){        
    if(window.XMLHttpRequest)
    {// code for IE7+,Firefox,Chrome,Opera,Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {//Code for IE6,IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = requestStateChangeHandler;

    xmlhttp.open("POST",url,true);
    xmlhttp.setRequestHeader('Content-Type','text/xml');
    xmlhttp.setRequestHeader('Cache-Control','no-cache');
    xmlhttp.send(postData);
}


function requestStateChangeHandler(){
    if (xmlhttp.readyState == 4) 
    {
        if(xmlhttp.status == 200)
        {
            document.getElementById('results').innerHTML = xmlhttp.responseText;
        }
        else
            dump("Error loading page\n");
    }
}

解决方法

您可以使用内嵌图像

在服务器端编码您在base64中的响应

在PHP中使用base64_encode(“你的数据”)
并在JavaScript中

result = document.getElementById('results');
result.innerHTML = '<img src="data:image/gif;base64,' + xmlhttp.responseText + '"/>';

原文地址：https://www.jb51.cc/html/231492.html