Как загружать несколько файлов?

Question

[lue merg]

То что существует

<input type="file" name="photo[]" multiple accept="image/*,image/jpeg">

Это мы все дружно знаем, но тут существует проблема, если выбрать файлы и после выбрать еще, то старые файлы исчезают.

Была идея, создать отдельный массив для всех загружаемых изображении,

for (var i = 0; i < files.length; i++) {
     var file = files[
     //Обработка изображения
     queue[file.name] = file;
}

но потом узнал, что менять value полю input file нельзя.

Какие есть еще варианты?

Answer 1

[Алексей Уколов]

Можно скрывать инпут, в который что-то загрузили и вместо него показывать новый пустой.

но потом узнал, что менять value полю input file нельзя.

Менять нельзя, но при сабмите формы добавлять эти файлы в FormData руками - вполне.

Comments

[lue merg]

Возможно я чего-то не понял, но в чем суть, ведь в новый инпут я так же не смогу ничего присвоить, если я решу добавить файлов еще?

[lue merg]

Мне необходимо, что-бы когда я нажимал на кнопку отправить в форме, то у меня в POST запросе был массив photo[] со всеми фотографиями, которые я загружал

[Алексей Уколов]

Так и не надо присваивать - он же будет работать как обычно - пользователь выберет файлы и всё.
Только нужно будет именовать их как photos[][], иначе я не уверен, что браузер корректно соберёт значения. На сервер, соответственно, будет приходить массив массивов с файлами и нужно будет просто два цикла делать, чтобы их все обработать.

[Алексей Уколов]

Что-то вроде вот этого: https://jsfiddle.net/alexey_m_ukolov/5pLrtogx/7/

[lue merg]

Окей с этим вроде чуток понял, но переменной photos так и не появилась в post запросе

form.on('submit', function(event) {
   var formData = new FormData(this);

   for (var id in queue) {
      formData.append('photos[]', id);
   }
});

[Алексей Уколов]

Вы должны отменить дефолтное поведение формы и отправить ajax-запрос самостоятельно.

form.on('submit', function(event) {
   event.preventDefault();

   var formData = new FormData(this);

   for (var id in queue) {
      formData.append('photos[]', id);
   }

   fetch(...);
});

Answer 2

[Илья Чермошенцев]

$total = count($_FILES['photo']['name']);
for( $i=0 ; $i < $total ; $i++ ) {
$tmpFilePath = $_FILES['photo']['tmp_name'][$i];
if ($tmpFilePath != ""){
$newFilePath = "./uploadFiles/" . $_FILES['photo']['name'][$i];
if(move_uploaded_file($tmpFilePath, $newFilePath)) {
//Handle other code here
}
}
}

Comments

[Алексей Уколов]

Вопрос-не-читай-ответ-пиши?