Choose Multiple Images And Upload With Preview

I need to add multiple images for upload. Below is my form. In the form, if you kindly check run code snippet`, when I upload image one by one, images with preview shown but no of

Solution 1:

This is because you are relying on the browser's default <input>'s UI, which will only show its current content.

So if you want to upload all the Files that got selected, create an Array where you'll store all your Files, at every change.

Then to send it to your server, you will block the default behavior of your <form> by blocking its submit event, and sending a FormData filled with your files through XHR.

$(document).ready(function() {
  // First define the Array where we will store all our filesvar myFiles = [];
  // now, every time the user selects new Files,
  $("#files").on("change", function(e) {
    var files = e.target.files, file;
    // iterate through all the given filesfor (var i = 0; i < files.length; i++) {
      file = files[i];
      myFiles.push(file); // store it in our array
      $('<span class="pip">' +
        '<img class="imageThumb" ' +
        // no need for a FileReader here,//  a blobURI is better (sync & uses less memory)'src="' + URL.createObjectURL(file) + '" ' +
        'title="' + file.name + '"/>' +
        '<br/>' +
        '<span class="remove">Remove image</span>' +
        '</span>')
      .insertAfter("#files")
      // add the event listener only on the new .remove
      .find(".remove").click(removeFile.bind(null, file));
    }
    updateCounters();
  });

  // now override the default form submission
  $('form').on('submit', upload);

  // removes both the preview elements from doc and the file from our arrayfunctionremoveFile(file, evt) {
    $(evt.target).parent(".pip").remove();
    myFiles.splice(myFiles.indexOf(file), 1);
    updateCounters();
  }
  // ...functionupdateCounters() {
    $('#counter').text(myFiles.length + ' files selected');
  }
  // from submission overriding functionfunctionupload(evt) {
    evt.preventDefault(); // first block the default eventvar fd = newFormData(); // create a new FormDatafor (var i = 0; i < myFiles.length; i++) {
      fd.append('files[]', myFiles[i]); // append all our files to it
    }
    // Post the formdata through XHRvar xhr = newXMLHttpRequest();
    xhr.open('POST', 'YOUR_FORM_ACTION_URL');
    // if you wanted to do something after the files are submitted// xhr.onload = callback;
    xhr.send(fd);
  }
});

input[type="file"] {
  display: block;
}

.imageThumb {
  max-height: 75px;
  border: 2px solid;
  padding: 1px;
  cursor: pointer;
}

.pip {
  display: inline-block;
  margin: 10px10px00;
}

.remove {
  display: block;
  background: #444;
  border: 1px solid black;
  color: white;
  text-align: center;
  cursor: pointer;
}

.remove:hover {
  background: white;
  color: black;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div><h3>Upload your images</h3><spanid="counter">0 files selected</span><inputtype="file"id="files"name="files[]"multiple /><br><inputtype="submit"name="submit"value="Submit"></div>