Multiple Image upload on array - Javascript/Jquery

I wanted to upload some array of images through JavaScript. I tried the below code:

<script type="text/javascript">
var count =0;
$(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $("#files").on("change", function(e) {
      var files = e.target.files,
        filesLength = files.length;
        count++;
      for (var i = 0; i < count; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"removeImg\">Remove image</span>" +
            "</span>").insertAfter("#files");
          $(".removeImg").click(function(){
            $(this).parent(".pip").remove();
          });

          // Old code here
          /*$("<img></img>", {
            class: "imageThumb",
            src: e.target.result,
            title: file.name + " | Click to remove"
          }).insertAfter("#files").click(function(){$(this).remove();});*/

        });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("Your browser doesn't support to File API")
  }
});
</script>

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

HTML

  <div class="field" align="left">
      <h3>Upload your images</h3>
      <input type="file" id="files" name="files[]" multiple />
    </div>

But somewhere, when I click the submit button on my form, it sends me only array of one file, which is the last updated file. I wanted array of it..so that I can process that data later.

Please help me out.

i have tested your code it's working fine you just need to replace count variable in for loop with the filesLength variable then you will get all the images not last one that you were getting before!! below is the corrected code. do run the code it will work for you!in upload.php when write you will get number of images you have selected!

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
var count =0;
$(document).ready(function() {
  if (window.File && window.FileList && window.FileReader) {
    $("#files").on("change", function(e) {

      var files = e.target.files,
        filesLength = files.length;
        console.log(filesLength);
        count++;
      for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
          var file = e.target;
          $("<span class=\"pip\">" +
            "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
            "<br/><span class=\"removeImg\">Remove image</span>" +
            "</span>").insertAfter("#files");
          $(".removeImg").click(function(){
            $(this).parent(".pip").remove();
          });

          // Old code here
          /*$("<img></img>", {
            class: "imageThumb",
            src: e.target.result,
            title: file.name + " | Click to remove"
          }).insertAfter("#files").click(function(){$(this).remove();});*/

        });
        fileReader.readAsDataURL(f);
      }
    });
  } else {
    alert("Your browser doesn't support to File API")
  }
});
</script>


<form id="imageform" method="post" enctype="multipart/form-data" action="upload.php">
  <div class="field" align="left">
      <h3>Upload your images</h3>
      <input type="file" id="files" name="files[]" multiple />
    </div>
    <input type="submit" name="submit" value="Submit">
</form>


    <form id="imageform" method="post" enctype="multipart/form-data">
      <div class="field" align="left">
          <h3>Upload your images</h3>
          <input type="file" id="files" name="files[]" multiple />
        </div>
        <input type="submit" name="submit" value="Submit">
    </form>