Question

我有一个ajax上传脚本，当用户上传文件时会调用它，并且一切正常，成功运行了一些功能，一切都很好。

但现在我的问题是

在服务器端，它将在Python中对上传的文件做一些不同的事情，我将向用户显示。诸如“正在编译”，“正在读取数据库”等等，并且这种情况会在彼此之后一次发生。

$(document).ready(function() {

    $("#chkPassport").click(function () {
        if ($(this).is(":checked")) {
            $("#div_id").show();
        } else {
            $("#div_id").hide();
        }
    });

    $('#uploadform').on('submit', function(event) {
        // Disable upload button when pressed.
        $("input[type=submit]").attr("disabled", true);
        event.preventDefault();

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

        $.ajax({
            xhr : function() {
                var xhr = new window.XMLHttpRequest();
                var run_once = 0;

                $("#alertsuccess").hide();
                $("#alertcompile").hide();
                //$('#testa').text(3 + '%');
                $('#progressBar').attr('aria-valuenow', 0).css('width', 0 + '%').text(0 + '%'); 
                $('#progressBar').show();

                xhr.upload.addEventListener('progress', function(e) {

                    if (e.lengthComputable) {

                        console.log('Bytes Loaded: ' + e.loaded);
                        console.log('Total Size: ' + e.total);
                        console.log('Percentage Uploaded: ' + (e.loaded / e.total));

                        var percent = Math.round((e.loaded / e.total) * 100);
                        if(percent > 99 && run_once == 0){
                            $("#alertsuccess").hide();
                            $("#alertsuccess").text("* Finishing up...");
                            $('#alertsuccess').fadeIn('slow');
                            run_once = 1;
                        }
                        $('#progressBar').attr('aria-valuenow', percent).css('width', percent + '%').text(percent + '%');                    
                    }
                });

                return xhr;
            },
            type : 'POST',
            url : '/uploader',
            data : formData,
            processData : false,
            contentType : false,
            success : function() {

                $("input[type=submit]").attr("disabled", false);
                $('#progressBar').attr('aria-valuenow', 0).css('width', 0 + '%').text(0 + '%');
                $("#alertsuccess").text("* Files uploaded succesfully!"); 

                $.ajax({
                    url: '/home',
                    type: 'GET',
                    cache: false,
                    async: false,
                    data: 'state',
                    success : function(){

                        if(state == 1){
                            $("#alertsuccess").text("* OK ALL DONE"); 
                        }
                        setTimeout(function(){
                            $('#alertcompile').fadeIn('slow');
                            $("#alertcompile").text("* Compiling...");    
                        }, 2000);

                        setTimeout(function(){
                            $("#alertcompile").text("* Downloading...");    
                            //downloadFile("http://127.0.0.1:5000/static/downloads/software/test.trf");
                        }, 5000);

                        setTimeout(function(){
                            $("#alertcompile").fadeOut('slow');    
                        }, 7000);

                        setTimeout(function(){
                            $("#alertsuccess").fadeOut('slow');    
                        }, 7500);
                    }
                });

                succsessUpload();

                window.location.href = "/uploader_done";
                $("#alertcompile").hide();
                $('#alertcompile').fadeIn('slow');
            }
        });
    });
});

现在，我用setTimeout模拟答案。取而代之的是我想要实际的数据，但是我不知道如何使它工作。

从Flask将数据发布到Ajax

0 个答案: