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);
?>

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

1 个答案: