Question

我想要保存来自多个输入的所有图像。但是我很难不使用表单提交来获取所有图像。我正在使用ajax。

例如，这是我的HTML

<input type="file" id="image-1" name="item_file[]">
<input type="file" id="image-2" name="item_file[]">

这是提交时的我的ajax

var file_data = $("#image")[0].files; 
var form_data = new FormData();
for(var i = 0; i < file_data.length; i++) {
   form_data.append('item_file[]', file_data[i]);;
}

 $.ajax({
    url: "upload.php",
    dataType: 'json',
    cache: false,
    contentType: false,
    processData: false,
    data: form_data,       
    type: 'POST'
 })

在服务器端，我只有1个。

Answer 1

首先，您不能两次使用相同的ID，您应该对其进行更改

<input type="file" id="image1" class="image" name="item_file[]">
<input type="file" id="image2" class="image" name="item_file[]">

第二，使用$("#image")[0]仅获得第一个，您必须遍历元素

var form_data = new FormData(), k = 0;

$('.image').each(function(_, elem) {
    var images = elem.files;

    for(var i=0; i < images.length; i++) {
        form_data.append("image" + (++k), images[i]);
    }
});

$.ajax({
    url         : 'upload.php',
    data        : form_data,
    processData : false,
    contentType : false,
    type: 'POST'
}).done(function(data){
    // do stuff
});

从多个输入中获取所有文件

1 个答案: