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

问题描述

在我的项目中，我将多张图片上传到一个产品，并在表单的隐藏字段中附加响应中图片的 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>

解决方法

您可以将 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();

                    }

                },});



        }
    });

}