使用 Ajax 从不同的输入上传多个文件答案

【问题标题】：Uploading multiple files from different inputs using Ajax使用 Ajax 从不同的输入上传多个文件
【发布时间】：2018-11-08 13:14:17
【问题描述】：

我有两个不同的文件输入和多个文本/选择输入，我想使用 Ajax 上传到 PHP 文件。文件输入用于发送图像，因为它们是我想通过输入名称识别的两个特定图像，所以我不想使用<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 将两个图像输入附加到同一个请求中，还是我最好尝试将它放在两个不同的请求中？

【问题讨论】：

嗨，欢迎来到 Stack Overflow。这不是您的问题的解决方案，而是一条评论：您的 HTML 中有两个同名的文件。这行不通。我相信这只是一个错字，但它也可能在您的代码中。
啊，谢谢，它不在我的 HTML 中，因为我更改了所有名称以使其对于其他可能的用例和其他可能有相同问题的用例更简单:)
任何控制台错误？
无，ajax 只触发错误函数，因为它没有从我的 PHP 文件中获取 json。但是 PHP 文件收到一个空请求。
你怎么知道它收到了一个空请求？

标签： javascript php jquery ajax file-upload

【解决方案1】：

event.target.files是一个数组，所以需要数组的第一个文件

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

【讨论】：

谢谢，这让我更清楚了。新文件是预先添加还是附加到数组中？（对每个文件持续使用event.target.files[0] 是否公平，还是我需要增加 0？）
您有多个输入，每个输入一个文件，因此您将始终拥有event.target.files[0]