ajax и мультиаплоад файлов

Serfer 07.06.2018 11:32

Я понимаю, что тема уже немного тут проскакивала, но... пока так и не получилось ничего найти или решить вопрос.

Скажите, пожалуйста, как отловить и сохранить на сервере файлы, переданные через ajax-форму. Конструкция следующая:

Есть 3 файла:

index.html - файл с формой
uploadPhoto.html - обработчик на стороне сервера
ajax_upload_file.js - JS

где расположено:

index.html
------------------------------------------------------------------------------
Выборка нескольких файлов:
<p><input type="file" multiple="multiple" accept="image/*" name="picture"></p>

На эту часть вешаем событие "click":
<a href="#" class="upload_files btn btn-primary">Загрузить файлы</a>

Сюда вставляем ответ:
<div class="ajax-reply"></div>


ajax_upload_file.js
------------------------------------------------------------------------------
var files; // переменная. будет содержать данные файлов

// заполняем переменную данными, при изменении значения поля file
$('input[type=file]').on('change', function(){
files = this.files;
});

// обработка и отправка AJAX запроса при клике на кнопку upload_files
$('.upload_files').on( 'click', function( event ){

event.stopPropagation(); // остановка всех текущих JS событий
event.preventDefault(); // остановка дефолтного события для текущего элемента - клик для <a> тега

// ничего не делаем если files пустой
if( typeof files == 'undefined' ) return;

// создадим объект данных формы
var data = new FormData();

// заполняем объект данных файлами в подходящем для отправки формате
$.each( files, function( key, value ){
data.append( key, value );
});

// добавим переменную для идентификации запроса
data.append( 'my_file_upload', 1 );

// AJAX запрос
$.ajax({
url : '/ajax/sheets/_postPhoto.html',
type : 'POST', // важно!
data : data,
cache : false,
dataType : 'json',
// отключаем обработку передаваемых данных, пусть передаются как есть
processData : false,
// отключаем установку заголовка типа запроса. Так jQuery скажет серверу что это строковой запрос
contentType : false,
// функция успешного ответа сервера
success : function( respond, status, jqXHR ){

console.log("respond, status, jqXHR", respond, status, jqXHR);

// ОК - файлы загружены
if( typeof respond.error === 'undefined' ){
// выведем пути загруженных файлов в блок '.ajax-reply'
var files_path = respond.files;
var html = '';
$.each( files_path, function( key, val ){
html += val +'<br>';
} )

$('.ajax-reply').html( html );
}
// ошибка
else {
console.log('ОШИБКА: ' + respond.error );
}
},
// функция ошибки ответа сервера
error: function( jqXHR, status, errorThrown ){
console.log( 'ОШИБКА AJAX запроса: ' + status, jqXHR );
}

});

});


И обработчик:

uploadPhoto.html
------------------------------------------------------------------------------

$ffile[$form:files]

Так вот, на входе, метод ^ffile.count[] отображает именно то количество, которое передано.

При создании таблицы с ключами ^ffile.keys[] создается таблица

keys
0
1
2
...

Если попытаться обратиться к хэшу по индексу $ffile.at(0) и пытаться сохранить или вытащить имя файла - ничего.

$bbb[^file:justname[$ffile.at(0)]]
^bbb.save[/_test/bbbb.txt]


В запрос уходит вот это:

------WebKitFormBoundarytT1yA0BD2jjwhlbV
Content-Disposition: form-data; name="0"; filename="paraplan.jpg"
Content-Type: image/jpeg


------WebKitFormBoundarytT1yA0BD2jjwhlbV
Content-Disposition: form-data; name="my_file_upload"

1
------WebKitFormBoundarytT1yA0BD2jjwhlbV--


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

Уже который раз пытаюсь это сделать, но в итоге пилю все на PHP, а хотелось бы найти решение на парсере.

Как это реализовать? Плз.

---