Как отправить несколько файлов input[multiple] через FormData() и обработать на сервере PHP?

Question

[Александр Суставов]

Есть формочка отправляющая файлы на сервер, с отправкой и приемом одного файла проблем не возникает (конкретно отправляются изображения jpg,png), но как правильно залить в FormData несколько файлов, что бы сервер их принял как данные единого input?

HTML:

<div id="wallpapers" class="changes">
            <p>Images</p>
            <label class="fileImg">
                <input type="file" accept="image/jpeg,image/png" multiple>
            </label>
        </div>

JavaScript:

//Видимо файлы идут массивом но я не могу сообразить как этот массив передать в FormData()
    var images = document.getElementsByClassName('fileImg')[1].children[0].files[0];
    var response = document.getElementById('response');
    var form = new FormData();
    form.append('logo',images);

//Запрос
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState != 4) return;
        response.innerHTML = xhr.responseText;
    };
    xhr.open("POST", "php/insert.php");
    xhr.send(form);

PHP:

if(isset($_FILES['logo'])) {
        header("Content-type: text/txt; charset=UTF-8");
        echo ($_FILES['logo']['type']);

//Создаю директорию, потом записываю
        @mkdir("../../katalog/".$_POST['category'].'/'.$_POST['header'], 0777,true);
        copy($_FILES['logo']['tmp_name'],"../../katalog/".
            $_POST['category'].'/'.
            $_POST['header'].
            '/logo.'.explode("/",$_FILES['logo']['type'])[1]);
    }

Я пробовал отправить не files[0], а просто files (конец первой строки js) и получить файл по индексу $_FILES['logo']['tmp_name'][0] все тщетно, видимо formdata не воспринимает такой массив
В принципе PHP часть мне не так важна, мне бы с FormData() разобраться.

Answer 1

[sasha]

javascript

//предполагается что в инпуте ниже несколько файлов подкреплено, ну или хотябы один
//вешаем событие на изменение инпута, тоесть сработает когда будут выбраны файлы
$('imput#files').change(function(){
    var files = this.files; //это массив файлов
    var form = new FormData();
    for(var i=0;i<files.length;i++){
        form.append("file_"+i,files[i]); 
    }
})

и потом отправить постом это на сервер. На сервере в $_FILES будут все эти файлы

Comments

[drugoi_bob]

В вашем случае все данные будут находиться в разных переменных file_0, file_1, file_3 и так далее. Нужно же, как я понимаю запихнуть все в один массив, что бы выбирать данные по индексу. Для это 5-ю строку вашего кода нужно изменить так: form.append("file["+i+"]", files[i]);

[Valeriu Vodnicear]

sasha большое спасибо! очень помогли

[WellemanGrey]

Плюсую. Очень помогли. Спасибо