How to Load All the Images from One of My Folder into My Web Page, Using Jquery/Javascript

        var dir = "img/";         var fileextension = ".jpg";     $(document).ready(function(){        var i = 1;        var n = 3;             for(i=1;i<n;i++){            imageloop(i);         };     });           function imageloop(i){        $("<img />").attr('src', dir + i + fileextension ).appendTo("#images");      } 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id = "images">  </div>

How to load all the images from one Directory

First of all you need to create a server page which will provide you list of names from that directory. you need to call that page (instead of folder name) from your $.ajax function.

Second, loop over that list of image names (paths) and create image elements. You are doing the similar stuff.

How can I auto load multiple images from a local folder using javascript/jquery?

I don't clearly know but I don't think you can actually read files using javascript . At least on the client side using raw javascript . You can however upload some files and then store it inside that specific app you are building

The main reason you can't do it in Javascript from the client side is because it would be risky for normal users , any javascript developers could hack into user's file system via creating a client side javascript exploit

If you want to upload files using raw vanilla javascript , you can do it like this ...

<input id="image-file" type="file" />

Then handle it via javascript like this

document.getElementById("image-file").addEventListener('onclick', function(e){
  const file = e.target.files[0];
  // your code
})

but if you really want to load images from a specific directory , you have to use a server side language like Node.js , you can learn to do it like this

Reading Images to a webpage from folder Javascript/Jquery

Something like this?

var folder = "folder/path/";
$.ajax({  url: folder,  success: function(data) {      console.log("success");        $(data).find("a").attr("href", function(i, val) {          if (val.match(/\.(jpe?g|JPE?G|png|PNG|gif|GIF)$/)) {
        var output = "<img src='" + val + "'>";        $("#YourContainer").append(output);              }          });
  },  error: function(e) {    console.log(e + " error");  }});

<input type="file" id="fileinput" multiple />
<script type="text/javascript">
  function readMultipleFiles(evt) {
    //Retrieve all the files from the FileList object
    var files = evt.target.files; 

    if (files) {
        for (var i=0, f; f=files[i]; i++) {
              var r = new FileReader();
            r.onload = (function(f) {
                return function(e) {
                    var contents = e.target.result;
                    alert( "Got the file.n" 
                          +"name: " + f.name + "n"
                          +"type: " + f.type + "n"
                          +"size: " + f.size + " bytesn"
                          + "starts with: " + contents.substr(1, contents.indexOf("n"))
                    ); 
                };
            })(f);

            r.readAsText(f);
        }   
    } else {
          alert("Failed to load files"); 
    }
  }

  document.getElementById('fileinput').addEventListener('change', readMultipleFiles, false);
</script>