How to Efficiently Upload Multiple Images Using AJAX, PHP, and jQuery?

How to Upload Multiple Images Using AJAX, PHP, and jQuery

Uploading multiple images using AJAX, PHP, and jQuery can be a useful skill to have when developing web applications. Let's go through a problem and its solution to help you achieve this:

Problem:

"I'm having trouble uploading multiple images using AJAX. Here's the code I've written:"

Solution:

The issue here lies not in uploading multiple images but rather in sending file data through AJAX. To resolve this, we need to modify our code and use JSON to encode the files:

Updated HTML:

<div>
<p><strong>Updated CSS:</strong></p>
<pre class="brush:php;toolbar:false">#uploads {
  display: block;
  position: relative;
}

#uploads li {
  list-style: none;
}

#drop {
  width: 90%;
  height: 100px;
  padding: 0.5em;
  float: left;
  margin: 10px;
  border: 8px dotted grey;
}

#drop.hover {
  border: 8px dotted green;
}

#drop.err {
  border: 8px dotted orangered;
}

Updated JavaScript:

var display = $('#uploads'); // cache `#uploads`, `this` at `$.ajax()`
var droppable = $('#drop')[0]; // cache `#drop` selector
$.ajaxSetup({
  context: display,
  contentType: 'application/json',
  dataType: 'json',
  beforeSend: function (jqxhr, settings) {
    // pre-process `file`
    var file = JSON.parse(
      decodeURIComponent(settings.data.split(/=/)[1])
    );
    // add `progress` element for each `file`
    var progress = $(
      '<progress></progress>',
      {
        class: 'file-' + (!!$('progress').length ? $('progress').length : '0'),
        min: 0,
        max: 0,
        value: 0,
        'data-name': file.name,
      }
    );
    this.append(progress, file.name + '<br>');
    jqxhr.name = progress.attr('class');
  },
});

var processFiles = function processFiles(event) {
  event.preventDefault();
  // process `input[type=file]`, `droppable` `file`
  var files = event.target.files || event.dataTransfer.files;
  var images = $.map(files, function (file, i) {
    var reader = new FileReader();
    var dfd = new $.Deferred();
    reader.onload = function (e) {
      dfd.resolveWith(file, [e.target.result]);
    };
    reader.readAsDataURL(new Blob([file], { type: file.type }));
    return dfd.then(function (data) {
      return $.ajax({
        type: 'POST',
        url: '/echo/json/',
        data: {
          file: JSON.stringify({
            file: data,
            name: this.name,
            size: this.size,
            type: this.type,
          }),
        },
        xhr: function () {
          // do `progress` event stuff
          var uploads = this.context;
          var progress = this.context.find('progress:last');
          var xhrUpload = $.ajaxSettings.xhr();
          if (xhrUpload.upload) {
            xhrUpload.upload.onprogress = function (evt) {
              progress.attr({ max: evt.total, value: evt.loaded });
            };
            xhrUpload.upload.onloadend = function (evt) {
              var progressData = progress.eq(-1);
              console.log(progressData.data('name') + ' upload complete...');
              var img = new Image();
              $(img).addClass(progressData.eq(-1).attr('class'));
              img.onload = function () {
                if (this.complete) {
                  console.log(progressData.data('name') + ' preview loading...');
                }
              };
              uploads.append('<br>

', img, '

'); }; } return xhrUpload; }, }) .then(function (data, textStatus, jqxhr) { console.log(data); this.find('img[class=' + jqxhr.name + ']') .attr('src', data.file) .before( '' + data.name + '
' ); return data; }, function (jqxhr, textStatus, errorThrown) { console.log(errorThrown); return errorThrown; }); }); }); $.when.apply(display, images).then(function () { var result = $.makeArray(arguments); console.log(result.length, 'uploads complete'); }, function err(jqxhr, textStatus, errorThrown) { console.log(jqxhr, textStatus, errorThrown); }); }; $(document).on('change', 'input[name^=file]', processFiles); // process `droppable` events droppable.ondragover = function () { $(this).addClass('hover'); return false; }; droppable.ondragend = function () { $(this).removeClass('hover'); return false; }; droppable.ondrop = function (e) { $(this).removeClass('hover'); var image = Array.prototype.slice.call(e.dataTransfer.files) .every(function (img, i) { return /^image/.test(img.type); }); e.preventDefault(); // if `file`, file type `image` , process `file` if (!!e.dataTransfer.files.length && image) { $(this).find('.drop-area-label').css('color', 'blue').html(function (i, html) { $(this).delay(3000, 'msg').queue('msg', function () { $(this).css('color', 'initial').html(html); }).dequeue('msg'); return 'File dropped, processing file upload...'; }); processFiles(e); } else { // if dropped `file` _not_ `image` $(this).removeClass('hover').addClass('err').find('.drop-area-label').css('color', 'darkred').html(function (i, html) { $(this).delay(3000, 'msg').queue('msg', function () { $(this).css('color', 'initial').html(html) .parent('#drop').removeClass('err'); }).dequeue('msg'); return 'Please drop image file...'; }); }; };

Updated PHP:

<?php if (isset($_POST['file'])) {
  // do php stuff
  // call `json_encode` on `file` object
  $file = json_encode($_POST['file']);
  // return `file` as `json` string
  echo $file;
}

By implementing this modified code, you can achieve multiple image uploads with AJAX, PHP, and jQuery.