AJAX、PHP、jQuery を使用して複数の画像を効率的にアップロードするにはどうすればよいですか?

AJAX、PHP、jQuery を使用して複数の画像をアップロードする方法

AJAX、PHP、および jQuery を使用して複数の画像をアップロードすることは、Web 開発時に役立つスキルとなります。アプリケーション。これを達成するのに役立つ問題とその解決策を見てみましょう:

問題:

「AJAX を使用して複数の画像をアップロードするのに問題があります。これが私が作成したコードです。やった書き込み:"

解決策:

ここでの問題は、複数の画像をアップロードすることではなく、AJAX を介してファイル データを送信することにあります。これを解決するには、コードを変更し、JSON を使用してファイルをエンコードする必要があります:

更新された HTML:

<div>

更新された 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;
}

更新しました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:

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

この変更されたコードを実装すると、AJAX、PHP、およびjQuery.

以上がAJAX、PHP、jQuery を使用して複数の画像を効率的にアップロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。