如何使用AJAX、PHP 和jQuery 上傳多個(gè)圖像

使用AJAX、PHP 和jQuery 上傳多個(gè)圖像可能是開發(fā)Web 時(shí)一項(xiàng)有用的技能應(yīng)用程式.讓我們來看看一個(gè)問題及其解決方案，以幫助您實(shí)現(xiàn)這一目標(biāo)：

問題：

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

更新的HTML：

更新的CSS：

<div>

已更新JavaScript:

#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 />',
      {
        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...';
    });
  };
};

以上是如何使用 AJAX、PHP 和 jQuery 高效上傳多個(gè)映像？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！