如何使用javascript、ajax和php从目录加载图像

How to load images from a directory using javascript, ajax and php

本文关键字：加载 图像 php 何使用 javascript ajax      更新时间：2023-09-26

我是Stackoverflow的新手，我正在学习Javascript和Ajax，我知道如何使用Ajax打开连接，但我不知道如何使用Ajax从同一服务器中的特定目录加载图像。我在谷歌上搜索了Javascript和Ajax教程，用Javascript从目录中加载图像，但没有jQuery，但我找不到任何好的教程，因为它们大多使用jQuery。我想将文件夹中的图像显示到HTMLdiv中，是否可以在不使用jQuery的情况下做到这一点？

在评论中看到了它，意识到我应该编辑这个问题。我想在一个文件夹中加载几个图像，而不必手动在HTML中键入它们。我可以使用DOM手动选择文件，但我需要显示几个图像，而不必重复太多的HTML代码。

您不需要使用JavaScript从web服务器上的文件夹加载图像。您只需要确保您的图像位于web服务器上的一个可公开访问的文件夹中，并使用img标签将其包含在HTML/PHP页面上：

<img src="path/to/image.jpg" alt="image" />

然而，如果你想动态加载一个图像列表，使用类似knockout.js的库，你可以加载包含图像集合的JSON，然后将集合绑定到你的HTML，如下所示：

<div data-bind="foreach: images">
    <img data-bind="attr: { src: $data }" alt="image" />
</div>

来自服务器的JSON看起来像这样：

["path1", "path2"]

你的PHP会有这样的东西：

<?php
$directory = '/path/to/files';
if ( ! is_dir($directory)) {
    exit('Invalid diretory path');
}
$files = array();
foreach (scandir($directory) as $file) {
    if ('.' === $file) continue;
    if ('..' === $file) continue;
    $files[] = $file;
}
echo json_encode($files);
?>

然后你会有一个JavaScript视图模型，看起来像这样：

var viewModel = function() {
    var self = this;
    self.images = ko.observableArray();
    self.loadImages = function() {
        var xmlhttp;
        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=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)   {
                var data = JSON.parse(xmlhttp.responseText);
                for(var i = 0; i < data.length; i++) {
                    self.images.push(data[i]);
                }
            }
        }
        xmlhttp.open("GET","getimages.php",true);
        xmlhttp.responseType = 'json';
        xmlhttp.send();
    }
    return self;
}();
ko.applyBindings(viewModel);

使用knockout.js的美妙之处在于，它可以在viewModel更改时自动更新DOM。如果从viewModel中删除元素id，则不必显式记住元素id并将其从DOM中删除。

您实际上不必"加载"图像。

您可以发出Ajax请求，获取所需图像的来源（例如"image.png"），然后将图像插入到html中。

这里有一个代码示例：

<script type="text/javascript">
   //xhr object
   var xhr = new XMLHttpRequest();
   //function called when ajax request return something
   xhr.onreadystatechange = function(){
      if(xhr.readyState == 4 && xhr.status == 200)
      {
         //get the returned image source
         var img_src = xhr.responseText;
         //insert the image in a div
         document.getElementById('my_div').innerHTML = '<img src="' + img_src + '" />';
      }
   }
   //open the wanted page
   xhr.open('POST', 'my_page.php', true);
   //ajax headers
   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
   //send parameters
   xhr.send('some_param='+param_value);
</script>
相关文章：