如何传递表单数据数组答案

【问题标题】：How can I pass form data array如何传递表单数据数组
【发布时间】：2018-06-08 08:28:28
【问题描述】：

如何将 formData 数组传递给 php 加载文件。如何将所有文件输入作为数组传递或迭代？

$(document).ready(function(){
    $('.add_more').click(function(e){
        e.preventDefault();
        $(this).before("<input name='file[]' class='file' type='file' /> <br> <input type='button' class='es' name='es' value='Upload This File' />");
    });

    $('.es').click(function (e) {
        e.preventDefault();

        var form = $('.form');
        var formData = new FormData(form);

//                                             |        |
        formData.append('file', $('.file')[0].files[0]);


        $.ajax({
            url: 'lib/upload.php',
            type: 'post',
            data: formData,
            contentType: false,
            processData: false,
            cache: false,
            success: function (data) {
                $('#here').html(data);
            }
        });
    });
});

还有html(php)文件：

<form id="form" action="" enctype="multipart/form-data" method="post">
    <input name="file[]" class="file" type="file" />
    <input type="button" name="es" class="es" value="Upload This File" />
    <br><br>
    <button class="add_more">Add More Files</button>
</form>

如何将所有文件输入作为数组传递？

【问题讨论】：

标签： javascript jquery arrays

【解决方案1】：

首先，您在文件输入中没有多个属性，并且您正在使用 js 中的类来选择表单，但是您的表单标签上有 id 而不是类。

<form id="form" action="" enctype="multipart/form-data" method="post">
    <input name="file[]" multiple class="file" type="file" />
    <input type="button" name="es" class="es" value="Upload This File" />
    <br><br>
    <button class="add_more">Add More Files</button>
</form>

第二个是当文件输入出现在表单中时，为该表单创建的FormData 将已经包含包括文件在内的所有数据，因此您不必手动推送它。所以只需像下面这样发送。

$(document).ready(function(){
    $('.add_more').click(function(e){
        e.preventDefault();
        $(this).before("<input name='file[]' class='file' type='file' /> <br> <input type='button' class='es' name='es' value='Upload This File' />");
    });

    $('.es').click(function (e) {
        e.preventDefault();

        var form = $('#form');
        var formData = new FormData(form[0]);    

        $.ajax({
            url: 'lib/upload.php',
            type: 'post',
            data: formData,
            contentType: false,
            processData: false,
            cache: false,
            success: function (data) {
                $('#here').html(data);
            }
        });
    });
});

【讨论】：