Question

让我解释一下我的问题。我有一个表格，其中包含输入[type = text] 和2 输入[type = file] ＆amp;只有一个验证按钮。

当点击按钮时，我想提交数据并上传文件（如果输入[type = file]不为空）。

另一点：当选择文件时，应该完成对接受文件类型和接受大小的控制。这意味着如果选择的文件与约束不匹配，则会显示错误消息，并且输入[type = file]保持为空。

要上传，请使用＆＃34; blueimp / jQuery-File-Upload ＆＃34;。您可以在下面找到此插件实例的代码（用于图片上传的代码）

$('#file-img').fileupload({
    dataType: 'json',
    autoUpload: false,
    formData: {type: 'businessPicture'},
    add: function (e, data) {
        var uploadErrors = [];
        var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
        if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
            uploadErrors.push('Not an accepted file type');
        }
        if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 4000000) {
            uploadErrors.push('File size is too big');
        }
        if(uploadErrors.length > 0) {
            alert(uploadErrors.join("\n"));
        } else {
            $.each(data.files, function (index, file) {
                $("#txt-file-img").val(file.name);
            });
            $("#btn_add_valid").on('click',function () { 
        $("#loading_img_modal").modal("show");  
                data.submit();
        });
        }
    },
    done: function (e, data) {
        $("#output").html('<p class="valid">SUCCESS!</p>');
        $.each(data.result.files, function (index, file) {
            $("#preview-picture").css("max-width","160px");
            $("#preview-picture").css("max-height","150px");
            $("#preview-picture").attr("src",file.url+'#'+ new Date().getTime()); 
        });
    },
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#upload-progress .bar').css(
            'width',
            progress + '%'
        ).text(
            progress + '%'
        );
    },
    fail: function (e, data) {
        $("#output").html('<p class="error">FAIL!</p>');
    }
});

您可以看到我将文件的提交绑定到#btn_add_valid

上的点击

$("#btn_add_valid").on('click',function () { 
    $("#loading_img_modal").modal("show");  
    data.submit();
 });

我有另一个类似的文件上传实例（.pdf，.doc ....）。当单击buton #btn_add_valid时，还会调用另一个AJAX函数。最后一个函数使用输入[type = text]中提到的信息修改数据库。

我的问题来自于这三个函数绑定了相同的事件$（＆＃34;＃btn_add_valid＆＃34;）。（＆＃39;点击＆＃39;，...我可以＆＃ 39;管理执行的顺序。

所以你想知道为什么这是一个问题？

因为上传文件的路径是在数据库修改后定义的。我使用表的最后一个id作为创建包含上传文件的文件夹的名称。因此，第一个执行的函数必须是具有数据库修改的函数。
因为我为每次上传显示一个带有进度条的模态。无论上传的顺序如何，我都需要等待第一次上传结束以隐藏第一个进度条并显示第二个进度条（如果上传了2个文件）

你有解决这个问题的方法吗？

非常感谢。

如何使用异步函数管理执行顺序

0 个答案: