Question

我是Stackoverflow的新手，我正在学习Javascript和Ajax，我知道如何使用Ajax打开连接，但我不知道如何使用Ajax从同一服务器中的特定目录加载图像。我用google搜索Javascript和Ajax教程，使用Javascript加载来自目录的图像，但没有jQuery，但我找不到任何好的教程，因为大多数都使用jQuery。我想将文件夹中的图像显示为HTML div，是否可以不使用jQuery来实现？

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

Answer 1

你真的不需要加载＆＃34;图像。

您可以发出Ajax请求，获取所需图像的来源（例如＆＃39; image.png＆＃39;），然后将图像插入到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>

Answer 2

您不需要使用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 viewModel：

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更新。您不必明确记住元素ID，并在从viewModel中删除它们时将其从DOM中删除。

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

2 个答案: