jquery ajax load images from local folder

Question

I want to get pictures from a local folder and post them on a webpage.

Pictures aren't loading on webpage but no errors in console.

<head>
    <title> </title>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script type="text/javascript">

        var dir = "/Users/me/Desktop/imgtest/";
        var fileextension = ".jpeg";
        $.ajax({
            url: dir,
            success: function (data) {
                $(data).find("a:contains(" + fileextension + ")").each(function () {
                    var filename = this.href.replace(window.location.host, "").replace("http://", "");
                    $("body").append("<img src='" + dir + filename + "'>");
                });
            }
        });
    </script>
</head>
<body>

Javascript runs in a browser and **must not have access** to local resources. Else it would be a huge security loophole. — Alex Kudryashev, Oct 21 '17 at 23:49
how would your http **server** interpret `/Users/me/Desktop/imgtest/` - what will it return if you request such an URL? — Jaromanda X, Oct 22 '17 at 00:10
@JaromandaX it loads my files from that folder. When I click on the html file, nothing appears. — ntf, Oct 22 '17 at 00:12
so a `GET /Users/me/Desktop/imgtest/` returns the files (I assume it's a list of files, not the contents of said files) from that folder, and that works? is that `file:///Users/me/Desktop/imgtest/` or `http://Users/me/Desktop/imgtest/` — Jaromanda X, Oct 22 '17 at 00:59

score 0 · Answer 1 · answered Oct 21 '17 at 23:48

0

This can't be running cos you page isn't loading. You should add this script before the end of your body or use $(document).ready to be sure you page is loading before to call the Ajax script.

<script type="text/javascript">

        var dir = "/Users/me/Desktop/imgtest/";
        var fileextension = ".jpeg";
  $(document).ready(function(){
        $.ajax({
            url: dir,
            success: function (data) {
                $(data).find("a:contains(" + fileextension + ")").each(function () {
                    var filename = this.href.replace(window.location.host, "").replace("http://", "");
                    $("body").append("<img src='" + dir + filename + "'>");
                });
            }
        });
});
    </script>

answered Oct 21 '17 at 23:48

This for the security reason, is normal you should add canvas or convert your image to base64 to be properly loading without any risk of security... https://www.base64-image.de/ how to load base64 image here https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html – Oct 22 '17 at 00:06
I'll try those. I have a lot of jpegs in the folder, so converting could be time consuming to do manually. Canvas didn't work. – ntf Oct 22 '17 at 00:17
@ntf So do it with my own tool you can take it easy multiples uploaded convert to base64 here https://codepen.io/headmax/pen/BwEWxE – Oct 22 '17 at 00:20
Thanks. I'll take a look, but might be too advanced for me right now. Still a beginner. – ntf Oct 22 '17 at 00:24
Don't worries stackoverflow is your home if you meet the good peoples ;). – Oct 22 '17 at 00:26

score 0 · Answer 2 · answered Oct 21 '17 at 23:51

0

Wrap your script code in a document ready function, like so:

$(document).ready(function() { 
    // your code here
});

Then, run a local web server to avoid XSS issues.

answered Oct 21 '17 at 23:51

Lincoln Bergeson

3,301
5
36
53

Tried it with Chrome Web Server. Got error: Failed to load resource: the server responded with a status of 404 (Not Found) – ntf Oct 22 '17 at 00:02
Which resource was not found? – Lincoln Bergeson Oct 25 '17 at 17:21

jquery ajax load images from local folder

2 Answers2