djnago Excel数据上传进度条

最新推荐文章于 2026-08-02 22:43:59 发布

原创最新推荐文章于 2026-08-02 22:43:59 发布 · 206 阅读

本内容遵循CC 4.0 BY-SA版权协议

这篇博客讲述了在Django中如何处理Excel数据上传并显示进度条的问题。作者遇到的挑战是，虽然文件上传进度达到100%，但数据并未完全存入数据库。为了解决这个问题，他们创建了一个路由来发送数据存储的进度到前端，使得在上传过程中能够正确显示进度。通过点击上传按钮，用户可以实时看到数据导入的进度，直到全部完成。

最近处理一个小问题，点击上传excel数据表格，并显示进度条

直接调用ajax中xhr来显示进度条，发现进度条瞬间100%，页面数据并没有显示（原因：上传文件进度完成，但数据并没有完全存入数据库）

解决方法：获取数据存储的进度

在后台设置全局变量，获取存入数据库进度
number_x = None
number_y = None

class CaseImportsView(AdminUserRequiredMixin, JSONResponseMixin, FormView)       
    global number_x
    global number_y
    pass

创建一路由，发送前台

class JinDuTioaView(View):

    def get(self, request, *args, **kwargs):
        print(number_x, "yyyyyyyyyyyyyyyyy")
        print(number_y)
        number = [number_x, number_y]
        return HttpResponse(json.dumps(number, ensure_ascii=False))

前台处理（进度获取ajax，通过定时器，100ms请求一次，获取进度）

var xhr_provider = function() {
    var xhr = new XMLHttpRequest();
    var prog_url = xxxxx
    var xx
    var sitv = setInterval(function () {
        $.ajax({
            type: "get",
            url: prog_url,
            contentType: "application/json",
            dataType: "json",
            success: function (res) {
                xx = parseInt(res[1])
                var x = parseInt(res[1])
                var y = parseInt(res[0])
                var ele = document.getElementById('3');
                var percent = Math.round(x * 100 / y);
                ele.style.width = percent + '%';
                console.log("1111111111111111111", percent)
                document.getElementById('2').innerHTML = percent + '%';
                if (percent == 100) {
                    clearInterval(sitv)
                    document.getElementById('upload_hint').innerHTML = '上传完成！'
                } else {
                    document.getElementById('upload_hint').innerHTML = '正在导入中...请不要重复点击“确认”按钮'
                }

            }
        })
    }, 100)

    return xhr;

};

点击上传按钮，显示进度

$.ajax({
    url: xxxx,
    type: 'post',
    dataType: 'json',
    // async: false,
    data: {
        "csrfmiddlewaretoken": $("[name=csrfmiddlewaretoken]").val()
    },
    // processData: false,
    xhr: xhr_provider,
    success: success
});

完成，，方法比较笨，见谅

标签

#python