1

在表单提交的情况下，我有一个 jquery ajax 函数，用于查询从文件上传的数据量，我可以使用该文件制作进度条。这是我的 js 文件：

var submitted = '';
var counter = 0;

$('#webfileuploadform').submit(function(){

    if(submitted == 'submitted') return false; // prevents multiple submits

    var freq = 1000; // freqency of update in ms
    var progress_url = '/upload_progress/' + $('#id_progress_id').val(); // ajax view serving progress info

    update_progress_bar();

    function update_progress_bar(){
        $.ajax({
            dataType:"json",
            url: progress_url,
            success: function(data){
                    counter ++
                console.log('hit success ' + counter);
            },
            complete: function(jqXHR, status){
                if (status == 'success'){
                    console.log('hit complete', status == success')
                } else {
                    console.lot('hit complete', status == something else')
                }
            }
        });
        setTimeout(function(){update_progress_bar()}, freq);
    }

    submitted = 'submitted'; // marks form as submitted

});

因此，用户将使用表单选择文件，然后单击提交。这一切都发生得很好。表单提交，文件上传，当我在单独的选项卡中打开我的 ajax 视图并不断刷新它时，进度显示得很好。我不明白为什么 update_progress_bar 函数会运行一次，直到我停止页面。我将上传一个文件，但在我单击浏览器上的“x”之前，我不会在控制台中获得任何“命中成功”。在我点击停止后，控制台吐出“命中成功”加上计数器。但我不应该停下来做这件事。当文件上传时，我需要它来工作。

任何想法我的问题是什么？

**

编辑

**

不确定它是否有区别，但我在 django 开发服务器上做这一切。我认为在同一个会话中使用两个 XMLHTTPRequest 应该没有问题。

4

3 回答 3

0

Try this:

var $submitted = '';

$('#webfileuploadform').submit(function(){

    if($submitted == 'submitted') return false; // prevents multiple submits

    var freq = 1000; // freqency of update in ms

    update_progress_bar();

    function update_progress_bar(){
        var progress_url = '/upload_progress/' + $('#id_progress_id').val(); // ajax view serving progress info

        $.ajax({
            dataType:"json",
            url: progress_url,
            success: function(data){
                console.log("hit success");
            },
            complete:function(jqXHR, status) {
                if (status == 'success') {
                    setTimeout(update_progress_bar, freq);
                }
            }
        });
    }

    $submitted = 'submitted'; // marks form as submitted

});
于 2013-05-03T16:00:37.763 回答
0

在 ajax 函数中，我将异步设置设置为 false：

$.ajax({
    async: false,
    ...
});

这解决了这个问题。我不知道怎么做。据我了解，此设置强制 ajax 请求等到所有其他 http 请求完成后才允许它继续。在这种情况下，我不知道这是如何工作的。我将不再回答我自己的问题，以防有人知道为什么会这样……

于 2013-05-16T19:21:27.307 回答
0

就目前而言，代码对我来说看起来不错。我会添加更多控制台日志记录，以确保 ajax 调用以您期望的状态返回：

complete:function(jqXHR, status) {
    console.log('got to complete, status: ', status);
    if (status == 'success') {
         console.log('status is success, calling setTimeout.');
         setTimeout(update_progress_bar, freq);
    }
}
于 2013-05-03T23:05:22.277 回答