Загрузка нескольких файлов с разных входов с помощью Ajax

Question

У меня есть два разных файловых ввода и несколько текстовых / выбранных входов, которые я хотел бы загрузить в файл PHP с помощью Ajax. Входные данные файла предназначены для отправки изображений, и поскольку они представляют собой два конкретных изображения, которые я хотел бы идентифицировать по имени входных данных, я не хочу использовать <input type="file" multiple>.

В настоящее время у меня есть следующее (имена были изменены, чтобы было проще):

<input type="file" name="file1">
<input type="file" name="file2">
<textarea name="text1"></textarea>
<button>Submit</button>

То, что я пробовал, - это нажать обе переменные, как только сработает событие изменения ввода файла, а затем нажать кнопку, запускающую загрузку с использованием Ajax.

$('input[type="file"][name="file1"]').on('change', prepareUpload);
$('input[type="file"][name="file2"]').on('change', prepareUpload);

files = new Array;

function prepareUpload(event){
    files.push(event.target.files);
}

$('button').on('click', uploadFiles);

function uploadFiles(event){

    $('#uploadInfo').html('Uploading...');
    event.stopPropagation();
    event.preventDefault();

    var data = new FormData();
    $.each(files, function(key, value){
        data.append(key, value);
    });

    data.append('text1', $('textarea[name="text1"]').val());

    $.ajax({
        url: '',
        type: 'POST',
        data: data,
        cache: false,
        dataType: 'json',
        processData: false,
        contentType: false, 
        success: function(result){
            //do stuff
        },
        error: function(error){
            console.log(error);
        }
    });
}

Но это, похоже, ничего не делает. Можно ли даже добавить два входных изображения к одному и тому же запросу, используя Ajax, или мне лучше попытаться поместить его в два разных запроса?

Answer 1

event.target.files - это массив, поэтому вам нужен первый файл в массиве

function prepareUpload(event){
    files.push(event.target.files[0]);
}