Производительность jQueryAJAX: множество запросов?

Question

[thehighhomie]

Добрый день! Делаю загрузку файлов на сервер для темы wordpress. Нужно чтобы была возможность загружать сразу по 30-40 файлов. Если не трогать php.ini на сервере то можно загружать до 20 фото за раз. Хочу обойтись без настройки php.ini, так как сам лично я не буду иметь доступ к серверу и не известно что там будет потом, мне нужно реализовать задачу.

В общем мне нужен совет по AJAX, так как файлы будут отправляться на сервер именно аяксом.

Есть у меня на уме 2 варианта, либо грузить по одному файлу и для каждого файла создавать ajax отправку, либо разрешить сразу множественное закачивание, собрать все файлы в кучу и по частям отправлять аяксом.

Вот пример но он не доведен до ума:

getUploadImages();

function getUploadImages() {
  var $btn = $('#upload-img');
  var MAX_COUNT_UPLOADS = 15;

  $btn.change(function() {
    var files = $btn[0].files, accept = [], exclude = [], i; // exclude нужен будет для показа сообщения о файлах которые не были загружены (если не картинки)

    if ( !files.length ) return;

    for (i = 0; i < files.length; i++) {

      if ( files[i].type.match('image.*') ) {
        accept.push( files[i] );
      } else {
        exclude.push( files[i].name );
      }

    }

    // тут я просто для теста отправил два раза, чтобы посмотреть как вообще это работает, вроде все ок, отправляет сразу второй запрос после загрузки 15 файлов.
    var def = $.when( uploadImagesAjax( accept.splice(0, MAX_COUNT_UPLOADS) ) );

    def.done(function() {
      console.log('=============ok=======');
      uploadImagesAjax( accept.splice(0, MAX_COUNT_UPLOADS) );
    });

  });
}

function uploadImagesAjax(data) {
  var $result = $('#uploaded-container');
  var formData = new FormData();

  formData.append( 'action', 'upload_image' );
  formData.append( 'nonce', ajax.nonce );

  $( data ).each(function(key, value) {
    formData.append( 'photo-' + key, value ); // префикс photo- нужен для дополнительных манипуляций в обработчике upload_image
  });

  $.ajax({
    type: 'post',
    url: ajax.url,
    data: formData,
    processData: false,
    contentType: false,

    success: function(response) {
      var urls = JSON.parse(response);

      $(urls).each(function() {
        $result.append('<img src="' + this + '">');
      });
    }
  });
}

Ребята, подскажите пожалуйста, много я ужаса написал или нет? как лучше поступить реализуя такую задачу?

Какой вариант предпочтительнее, по одному ajax на файл отправлять, либо сделать примерно так же как я в примере показал, либо как то по другому??

Если честно я уже голову сломал, я не знаю как по производительности будет вообще отличаться реализация этих 2х вариантов.

Comments

[Ярослав]

Засечь время выполнения скрипта не есть проблема, или в console.log() бан?)

У меня когда-то для quill стояла задача - после того как юзер написал статью и натыкал туда картинок, потом через превью убедился, что всё ок и статья готова к модерации, жмет "отправить" все фото улетают в base64 на сервер, сохраняются и обратно прилетает уже реальный адрес на сервере врезаясь в тег src каждого img.
Решил эту проблему очередью. У jQuery есть своя, без шестой екмы.
var deferreds = [];
deferreds.push();
$.when.apply($, deferreds).done(function() {});

Очереди решают всё и в основном в бигдата, и для меня тогда это было на тот момент самое быстрое по скорости загрузки решение.