多次成功响应Ajax后如何提交一次表单答案

【问题标题】：How to submit the form one time after multiple success response Ajax多次成功响应Ajax后如何提交一次表单
【发布时间】：2021-04-16 08:36:07
【问题描述】：

在我的项目中，我将多张图片上传到一个产品，并在我的表单中的隐藏字段中附加来自响应的图片的 uuid。

当我收到响应中的所有uuid 附加表单时，我只需要提交一次表单。

在我的情况下，表单提交多次，假设我上传 3 张图片，表单提交 3 次。

请建议我在所有图片上传后只提交一次表单的方法？

这是脚本：

<script>
$('#submit_form').on('click', function(evt) {
    evt.preventDefault();
    uploadPhotos(function() {});

});


function uploadPhotos(callback) {
// upload files
var $photos = $('#frmAddNewProduct input[type="file"]');

$photos.each(function(fi, el) {
    var files = el.files;
    if (files.length != 0 ) {
        for (var i = 0; i < files.length; i++) {
            var data = new FormData();
            data.append('_token', '{{ csrf_token() }}');
            data.append('upload_dir', 'products/images');
            data.append('category', 'product');
            data.append('file', files[i]);
            $.ajax({

            contentType: false,
            processData: false,
            type: 'POST',
            data: data,
            url: '{{ url("pharmacy/files")}}',
            success: function (res) {

                if (res.payload && res.payload.uuid) {
                    var $input = $('<input type="hidden" name="images[]">').val(res.payload.uuid);
                    var $message = res.payload.message;
                    $('#frmAddNewProduct').append($input);


                    // TODO : Form submits multiple times here should fix

                        // Submit form after appending the input
                        $('#frmAddNewProduct').submit();

                }

            },

        });


    }
}
});

}
</script>

【问题讨论】：

标签： javascript jquery ajax laravel jquery-events

【解决方案1】：

您可以将 for 循环移到内部仅用于附加图像

for (var i = 0; i < files.length; i++) {
    data.append(i, files[i]);
}

但您需要在服务器端处理多个文件。

完整：

function uploadPhotos(callback) {
    // upload files
    var $photos = $('#frmAddNewProduct input[type="file"]');

    $photos.each(function(fi, el) {
        var files = el.files;
        if (files.length != 0) {

            var data = new FormData();
            data.append('_token', '{{ csrf_token() }}');
            data.append('upload_dir', 'products/images');
            data.append('category', 'product');
            for (var i = 0; i < files.length; i++) {
                data.append(i, files[i]);
            }

            $.ajax({

                contentType: false,
                processData: false,
                type: 'POST',
                data: data,
                url: '{{ url("pharmacy/files")}}',
                success: function(res) {

                    if (res.payload && res.payload.uuid) {
                        var $input = $('<input type="hidden" name="images[]">').val(res.payload.uuid);
                        var $message = res.payload.message;
                        $('#frmAddNewProduct').append($input);


                        // TODO : Form submits multiple times here should fix

                        // Submit form after appending the input
                        $('#frmAddNewProduct').submit();

                    }

                },

            });



        }
    });

}

【讨论】：