CODEWITHSUNDEEP
javascriptphphtml
SivaJyothiG
SivaJyothiG

Reputation: 95

How to read and display images from local directory into a web page using php

I want to display directory folders list on left side of web page and its contents on right side of the page only after clicking the related folder/file, how to achieve this? I worked on how to get the folder structure from local directory it is working good but i am unable to display the contents after clicking the related file.

<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>';
    }

    ?>

Upvotes: 4

Views: 1085

Answers (1)

Amarjit Singh
Amarjit Singh

Reputation: 2154

Use Base64 Encoded Images

First, Show your file name like this.

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

When a user clicks on a file make an ajax request with the image path in it.

<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>

Now create a PHP script to return image data from the image path.

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

Upvotes: 3

Related Questions