Question

我有两个不同的文件输入和多个文本/选择输入，我想使用Ajax上传到PHP文件。文件输入旨在发送图像，并且由于它们是我要通过输入名称标识的两个特定图像，所以我不想使用<input type="file" multiple>。

目前，我有以下名称（为了简单起见，已对其进行了更改）：

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

我尝试过的操作是，一旦触发文件输入的change事件，就将两者都推入一个变量，然后按下按钮以使用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]);
}

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

1 个答案: