Comment télécharger efficacement plusieurs images à l'aide d'AJAX, PHP et jQuery ?

Comment télécharger plusieurs images à l'aide d'AJAX, PHP et jQuery

Le téléchargement de plusieurs images à l'aide d'AJAX, PHP et jQuery peut être une compétence utile lors du développement Web. candidatures. Passons en revue un problème et sa solution pour vous aider à y parvenir :

Problème :

"J'ai du mal à télécharger plusieurs images en utilisant AJAX. Voici le code que j'ai J'ai écrit : "

Solution :

Le problème réside ici pas en téléchargeant plusieurs images mais plutôt en envoyant des données de fichiers via AJAX. Pour résoudre ce problème, nous devons modifier notre code et utiliser JSON pour encoder les fichiers :

HTML mis à jour :

<div>
<p><strong>CSS mis à jour :</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;
}

Mise à jour 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...'; }); }; };

PHP mis à jour :

<?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;
}

En implémentant ce code modifié, vous pouvez réaliser plusieurs téléchargements d'images avec AJAX, PHP et jQuery.