<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <h1>Multiple File upload</h1> 
  <p>Select a file to see the PHP page return $_FILES, then select a second file to see $_FILES with both files</p>
  <form>
    Input:
    <input type="file" id="sell-images" name="images[]">
  </form>
  <img height="30" width="30" src="http://www.silkron.co.uk/images/spinner.gif" id="spinner" style="display: none;" />
  <pre id="output">
</pre>
</body>

</html>
$.fn.fileUploader = function (filesToUpload, sectionIdentifier) {
    var fileIdCounter = 0;

    this.closest("#sell-images").change(function (evt) {
        var output = [];
        for (var i = 0; i < evt.target.files.length; i++) {
            fileIdCounter++;
            var file = evt.target.files[i];
            var fileId = sectionIdentifier + fileIdCounter;

            filesToUpload.push({
                id: fileId,
                file: file
            });
        };

        for(var z = 0; z < filesToUpload.length; z++)
        {
            evt.target.files[z] = filesToUpload[z]['file'];
        }
        console.log('target files: ', evt.target.files)
    });

    return this;
};
    $(document).ready(function() {
      var filesToUpload = [];
      var files1Uploader = $("#sell-images").fileUploader(filesToUpload, "images[]");

      $("#sell-images").on('change',function(e) {
          e.preventDefault();
          console.log('$("#sell-images")[0].files: ', $("#sell-images")[0].files);

          var formData = new FormData();

        for (var i = 0, len = filesToUpload.length; i < len; i++) {
            console.log('adding to files[]: ',filesToUpload[i].file);
          formData.append("files[]", filesToUpload[i].file);
        }
          $.ajax({
              url: "http://elliott.andrewz.org/imageTest/uploadTest.php",
              method: "POST",
              data: formData,
              processData: false,
              contentType: false,
              success: function(response) {
                
                $('#spinner').hide();
                $('#output').html(response);
                  console.log('upload response: ', response);
              },
                    error: function () {
                              $('#spinner').hide();
                      $('#output').text('upload error');
                      console.log('Upload error');
                    }
          });
        $('#spinner').show();
      });
    });
/* Styles go here */