javascript - 如何使用php从本地目录读取图像并将其显示到网页中

Question

我想在网页左侧显示目录文件夹列表，只有在点击相关文件夹/文件后才在页面右侧显示其内容，如何实现？ 我研究了如何从本地目录获取文件夹结构，它运行良好，但在单击相关文件后我无法显示内容。

<ul>
   <li id="li1">
<a href="">
<?php
  $root = 'C:\Users\Public\Pictures';
  $pathLen = strlen($root);
  listFolderFiles($root, 0, strlen($root)); ?>            
</a> 
   </li>
 </ul>

<div class="col-lg-8 col-md-8" style="border: 1px solid">
   <img src="" width="100px" height="100px;">
</div>    

PHP:

  <?php 
    function listFolderFiles($dir){
    $ffs = scandir($dir);

    unset($ffs[array_search('.', $ffs, true)]);
    unset($ffs[array_search('..', $ffs, true)]);

    // prevent empty ordered elements
    if (count($ffs) < 1)
        return;

    echo '<ol>';
    foreach($ffs as $ff){
        echo '<li>'.$ff;
        if(is_dir($dir.'/'.$ff)) listFolderFiles($dir.'/'.$ff);
        echo '</li>';
    }
    echo '</ol>';
    }

    ?>

Answer 1

使用 Base64 编码的图像

首先，像这样显示你的文件名。

<li data-imgpath="C:\Users\Public\Pictures">Image</li>

当用户点击一个文件时，发出一个包含图像路径的 ajax 请求。

<script>
$('li').click(function(){
    var image_path = $(this).data('imgpath');
    $.ajax({
        url : "url to a php script to handle image request.",
        method : 'POST',
        dataType : 'JSON',
        data : {
            image_path : image_path
        },
        success : function(response) {
            $('select your img tag').attr('src', response.image_src);
        }
    });
});
</script>

现在创建一个 PHP 脚本以从图像路径返回图像数据。

<?php
$image_path = $_POST['image_path'];

$image_extension = explode('.', $image_path);

$image_extension = end($image_extension);

$image = base64_encode(file_get_contents($image_path));

$data = ['image_src' => 'data:image/'.$image_extension.';base64,'.$image];

echo json_encode($data);
?>