如何使用javascript，ajax和php從目錄加載圖像

Question

我是Stackoverflow的新手，正在學習Javascript和Ajax，我知道如何使用Ajax打開連接，但是我不知道如何使用Ajax從同一服務器中特定目錄加載圖像。 我已經搜索過Javascript和Ajax教程，以使用Javascript而不使用jQuery從目錄中加載圖像，但是由於大多數都使用jQuery，所以我找不到任何好的教程。 我想將文件夾中的圖像顯示到HTML div中，是否可以在不使用jQuery的情況下做到這一點？

在評論中看到它，意識到我應該編輯問題。 我想將多個圖像加載到一個文件夾中，而無需手動在HTML中鍵入它們。 我可以使用DOM手動選擇文件，但是我需要顯示多個圖像而不必重復太多HTML代碼。

Answer 1

您實際上不必“加載”圖像。

您可以發出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>

Answer 2

您無需使用JavaScript即可從Web服務器上的文件夾加載圖像。 您只需要確保圖像位於Web服務器上的公共訪問文件夾中，並使用img標簽將它們包含在HTML / PHP頁面中即可：

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

但是，如果您想通過像基因敲除.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);

使用淘汰表.js的好處在於，當viewModel更改時，它會自動處理DOM更新。 您無需顯式記住元素ID並將其從DOM中刪除（如果將它們從ViewModel中刪除）。