Wie lade ich mehrere Bilder effizient mit AJAX, PHP und jQuery hoch?

So laden Sie mehrere Bilder mit AJAX, PHP und jQuery hoch

Das Hochladen mehrerer Bilder mit AJAX, PHP und jQuery kann eine nützliche Fähigkeit bei der Webentwicklung sein Anwendungen. Lassen Sie uns ein Problem und seine Lösung durchgehen, um Ihnen dabei zu helfen, dies zu erreichen:

Problem:

„Ich habe Probleme beim Hochladen mehrerer Bilder mit AJAX. Hier ist der Code I.“ Habe geschrieben: „

Lösung:

Das Problem liegt hier nicht darin das Hochladen mehrerer Bilder, sondern das Senden von Dateidaten über AJAX. Um dieses Problem zu beheben, müssen wir unseren Code ändern und JSON zum Codieren der Dateien verwenden:

Aktualisiertes HTML:

<div>

Aktualisiertes CSS:

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

Aktualisiert 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...';
    });
  };
};

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

Durch die Implementierung dieses geänderten Codes können Sie mehrere Bild-Uploads mit AJAX, PHP usw. erreichen jQuery.

Das obige ist der detaillierte Inhalt vonWie lade ich mehrere Bilder effizient mit AJAX, PHP und jQuery hoch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!