如何使用 AJAX、PHP 和 jQuery 高效上傳多個映像？

如何使用AJAX、PHP 和jQuery 上傳多個圖像

使用AJAX、PHP 和jQuery 上傳多個圖像可能是開發Web 時一項有用的技能應用程式.讓我們來看看一個問題及其解決方案，以幫助您實現這一目標：

問題：

「我在使用 AJAX上傳多個圖像時遇到問題。而是在於透過AJAX發送文件資料。要解決此問題，我們需要修改程式碼並使用JSON 對檔案進行編碼：

更新的HTML：

更新的CSS：

<div>
<p>已更新JavaScript:<strong></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;
}

更新了PHP:

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...'; }); }; };透過實作此修改後的程式碼，您可以使用AJAX、PHP 和jQuery。