Cara Memuat Naik Berbilang Imej Menggunakan AJAX, PHP dan jQuery

Memuat naik berbilang imej menggunakan AJAX, PHP dan jQuery boleh menjadi kemahiran yang berguna untuk dimiliki semasa membangunkan web aplikasi. Mari kita lalui masalah dan penyelesaiannya untuk membantu anda mencapai perkara ini:

Masalah:

"Saya menghadapi masalah memuat naik berbilang imej menggunakan AJAX. Berikut ialah kod yang saya telah menulis:"

Penyelesaian:

Isunya di sini bukan terletak pada memuat naik berbilang imej tetapi lebih kepada menghantar data fail melalui AJAX. Untuk menyelesaikan masalah ini, kami perlu mengubah suai kod kami dan menggunakan JSON untuk mengekod fail:

HTML yang dikemas kini:

<div>

CSS yang dikemas kini:

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

Dikemas kini 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 />',
      {
        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 /><li>', img, '</li><br />');
            };
          }
          return xhrUpload;
        },
      })
        .then(function (data, textStatus, jqxhr) {
          console.log(data);
          this.find('img[class=' + jqxhr.name + ']')
            .attr('src', data.file)
            .before(
              '<span>' + data.name + '</span><br />'
            );
          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 &amp;&amp; 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 yang dikemas kini:

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

Dengan melaksanakan kod yang diubah suai ini, anda boleh mencapai berbilang muat naik imej dengan AJAX, PHP dan jQuery.

Atas ialah kandungan terperinci Bagaimana untuk Muat Naik Berbilang Imej Dengan Cekap Menggunakan AJAX, PHP, dan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!