Javascript 通过客户端从服务器检索图像

我在服务器上有一个文件夹，里面有一些图像。我想让我的客户机代码读取这个文件夹的内容（图像），然后在一个div上显示这个图像。我认为使用AJAX很容易，但AJAX似乎会返回一些嵌入在图像中的原始数据。我一直在寻找一种方法来获取图像的url而不是这些数据，但我所尝试的一切都不起作用。我真的更喜欢在客户端这样做。我很感激你能给我关于这件事的任何建议：）

谢谢

埃尔沙

//Here is some of my code...

var info = new OpenLayers.Control.WMSGetFeatureInfo({
                        url: 'http://localhost:8080/geoserver/wms',
                        title: 'Identify features by clicking',
                        queryVisible: true,
                        eventListeners: {
                            getfeatureinfo: function(event){              
                               map.addPopup( new OpenLayers.Popup.AnchoredBubble(
                                    "chicken",
                                    map.getLonLatFromPixel(event.xy),
                                    null,
                                    event.text + '<div> Hello Tibet :)</div>' + load('./Photos/potalaPalace.jpg'), 
                                    null,
                                    true

                                ));

                            }

                         }
                    });
                    map.addControl(info);
                    info.activate();

        });


        function ahah(url) {
              //document.getElementById(target).innerHTML = ' Fetching data...';
              if (window.XMLHttpRequest) {
                req = new XMLHttpRequest();
              } else if (window.ActiveXObject) {
                req = new ActiveXObject("Microsoft.XMLHTTP");
              }
              if (req != undefined) {
                req.onreadystatechange = function() {ahahDone(url);};
                req.open("GET", url, true);
                req.send("");
              }
            }  

            function ahahDone(url) {
              if (req.readyState == 4) { // only if req is "loaded"
                if (req.status == 200) { // only if "OK"
                  //'<div><img src="' + req.response + '"></div>';
                    var img = new Image();
                    img.src = req.url;
                    '<div><img src="' + img + '"/></div>';
                } else {
                  " <div> AHAH Error:\n"+ req.status + "\n" +req.statusText + "</div>";
                }
              }
            }

            function load(name) {
                ahah(name);
                return false;} 

//这是我的一些代码。。。
var info=new OpenLayers.Control.WMSGetFeatureInfo({
网址：'http://localhost:8080/geoserver/wms',
标题：“通过单击来识别特征”，
queryVisible：是的，
eventListeners：{
getfeatureinfo:函数（事件）{
map.addPopup（新建OpenLayers.Popup.AnchoredBubble(
“鸡”，
map.getLonLatFromPixel（event.xy），
无效的
event.text+“你好，西藏：）”+加载（“./Photos/potalapacel.jpg”），
无效的
真的
));
}
}
});
map.addControl（info）；
info.activate（）；
});
函数ahah（url）{
//document.getElementById（target.innerHTML='Fetching data…'；
if（window.XMLHttpRequest）{
req=新的XMLHttpRequest（）；
}else if（window.ActiveXObject）{
req=新的ActiveXObject（“Microsoft.XMLHTTP”）；
}
如果（请求！=未定义）{
req.onreadystatechange=function（）{ahahDone（url）；}；
请求打开（“获取”，url，true）；
请求发送（“”）；
}
}  
函数ahahDone（url）{
如果（req.readyState==4）{//仅当req“已加载”
如果（req.status==200）{//仅当“OK”时
//'';
var img=新图像（）；
img.src=req.url；
'';
}否则{
“AHAH错误：\n”+req.status+“\n”+req.statusText+”；
}
}
}
函数加载（名称）{
阿哈（姓名）；
返回false；}

你的问题已经问了好几年了，但也许这可以帮助其他人。 我不是最伟大的专家，但我用HTML5和它的画布元素做到了这一点

我使用了它的位图构造函数，你可以在它上面使用一个URI（URL）字符串，库将自动管理被动预加载（在完全加载之前不会显示图像）

以下注释代码有助于理解我的意思；）

使用EaselJS在客户端检索图像
//根元素在目标画布中显示显示列表的内容。
var期；
//变量来指定新的位图对象
var-img；
//函数初始化画布
函数init（）{
//以画布id作为参数的阶段构造函数
stage=newstage（document.getElementById（“cnvs_images”）；
//带有URI参数的位图对象。这可以是URL或图像路径（也可以是视频或其他画布）
//带有URL的示例
变量图片=”http://www.ndsicards.com/wp-content/uploads/Colors3D-1.jpg";
//如果此代码驻留在您的Web服务器中，并且客户端浏览器正在访问该代码所在的页面，则还可以使用服务器的“图像”文件夹的相对路径）
/*var picture=“somepath/afolder/subfolder/itzaimage.jpg”*/
img=新位图（图片）；
//例如，如果计划为图像设置动画，可以将其设置为参考点。
/*img.regX=img.image.width*0.5；
img.regY=img.image.height*0.5*/
//如果需要，可以缩放图像。1它的大小为1:1。
/*
img.scaleX=0.3；
img.scaleY=0.3；
*/
//添加到后台以便能够渲染的位图。
阶段。添加儿童（img）；
//如果计划为图像设置动画，则为每秒帧数
/*股票代码setFPS（60）；*/
//您需要一个Ticker侦听器才能呈现它。
Ticker.addListener（窗口）；
}
函数tick（）{
//在此，您可以根据需要设置任何动画代码，如以下简单示例所示：
/*img.x+=（stage.mouseX-img.x）*0.1
img.y+=（stage.mouseY-img.y）*0.1*/
//该行必须位于末尾，因为它呈现
stage.update（）；
}

这是一个工作示例，只需复制并粘贴即可。同时下载EaselJS库并在我的代码中更新它的路径。最后，如果你想动画的形象，你可以这样做；只需在我引用动画的地方取消注释代码，并对其进行测试

在合成中可以在客户端使用如上所述的EaselJS库，并使用位图对象，该对象的参数可以是URI或URL

---

我希望这对您有所帮助；）

我在服务器上有一个文件夹，里面有一些图像。我想让我的客户端代码读取此文件夹的内容（图像），然后在div上显示此图像我需要

javascript中的代码
文件系统中是否存在图像？如果是这样，您应该加载文件名列表，而不是数据。您可以使用您正在使用的任何服务器端语言生成文件夹内容列表，或者使用“dir>images.txt”或等效工具从控制台手动创建一个文件夹内容列表。您不能使用任何服务器脚本，如asp.net或php吗？因此，您可以创建一个Web服务
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="es" xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta charset="UTF-8" />
  <title>Retrieve images on client using EaselJS</title>
  <script src="easeljs-0.4/lib/easel.js"></script>
  <script>
   // Root element wich displays the content of a display list in the target canvas.
   var stage;
   // Variable to assign a new Bitmap object
   var img;

   // Function to init the canvas
   function init() {
    // Stage constructor with the canvas id as a parameter
    stage = new Stage(document.getElementById("cnvs_images"));
    // Bitmap object with an URI parameter. This can be an URL or a path to the image (it can also be a video or another canvas)
    // Example with an URL
    var picture = "http://www.ndsicards.com/wp-content/uploads/Colors3D-1.jpg";
    // You can also use a relative path to the server's images folder if this code resides in your webserver and the page it's being accessed by a client's browser)
    /* var picture = "somepath/afolder/subfolder/itzaimage.jpg"; */
    img = new Bitmap(picture);


    //You can set the image a point of reference, if you plan to animate it for example.
    /* img.regX = img.image.width * 0.5;
    img.regY = img.image.height * 0.5; */

    // You can scale the image if you need it. 1 it's like 1:1 size.
    /*
    img.scaleX = 0.3;
    img.scaleY = 0.3;
    */

    // The bitmap it's added to the stage to be able to be rendered.
    stage.addChild(img);

    //The frames per second if you plan to animate the image
    /* Ticker.setFPS(60); */ 
    // You'll need a Ticker Listener to be able to render it.
    Ticker.addListener(window);
   }

   function tick() {
    // Here you can set any animation code if needed as this simple example:
    /* img.x += (stage.mouseX - img.x) * 0.1
    img.y += (stage.mouseY - img.y) * 0.1 */                                                      
    // This line must be at the end because it renders the 
    stage.update();
   }
  </script>
</head>

 <!-- Don't forget the init funcion to be called onload -->
 <body onload="init()">
   <!-- And the canvas and it's id of course! -->
   <canvas id="cnvs_images" width="800" height="600"></canvas>
 </body>
</html>