ajax文件上传特定数量的输入

Question

<form class="imagegen_file" enctype="multipart/form-data" action="/image_maker/file">
<input class="file" name="image_0" type="file">
<input class="file" name="image_1" type="file">
<input class="file" name="image_2" type="file">
<input class="file" name="image_3" type="file">
<input .....
</form>

<a onclick="return image_gen_file();">upload</a>

<script type="text/javascript">
function image_gen_file(){
    var data = new FormData();
    jQuery.each($('.file')[0].files, function(i, file) {
        data.append('image_'+i, file);
    });

    $.ajax({
        url: baseurl + "/image_maker/file",
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        success: function(data){
            alert(data);
        }
    });

}</script>

上面的代码文件上传只适用于第一个输入（“image_0”）我想让它适用于所有其他人我该怎么做？

Answer 1

你只是循环了第一个input。你需要一个嵌套循环：

var data = new FormData();

$('.file').each(function(i) {
    $.each(this.files, function(j) {
        data.append('image_' + i + '_' + j, this);
    });
});

---

如果您想在各自的 AJAX 帖子中发布它们，请改用：

$('.file').each(function() {

    var data = new FormData();

    jQuery.each(this.files, function(i, file) {
        data.append('image_'+i, file);
    });

    $.ajax({
        url: baseurl + "/image_maker/file",
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        success: function(data) {
            alert(data);
        }
    });
});

Answer 2

var data = new FormData();
$('.file').each(function(i) {
    data.append('file'+i, this.files[0]);
});
$.ajax({
    url: baseurl + "/image_maker/file",
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    success: function(data) {
        alert(data);
    }
});