通过后期处理上传进度

我有一个上传表单,用户可以上传文件.上传完成后,文件将进行后期处理,有时上传完成后处理时间最长为10-15秒.

上传完成后,进度条为100%,但是如何检测文件何时完成,以便在文件处理时向用户显示"请稍候"标志.用户可能会认为由于进度条为100%,浏览器已冻结og崩溃但没有任何事情发生..

纯HTML5 + Javascript中的客户端解决方案是首选,但不是必须的:)

尝试

HTML

JS

var len = arr.length // file length
    , start = 0 // update progress
    , outputs = $("output[for=progress]") // notifications
    , progress = $("progress")
    , results = $("#results") // post processing 
    // gif spinner
    , spinner = $("", {
    "src": "data:image/gif;charset=binary;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="
});
// upload file
var request = function () {
    progress.prop("max", len);
    s = setInterval(function () {
        progress.prop("value", ++start);
        outputs.eq(0)
            .text("uploading file...")
    }, 1)
    return $.post("/echo/json/", {
        json: JSON.stringify(arr)
    })
    .then(function (data) {
        clearInterval(s)
        s = null;
        progress.prop("value", len);
        outputs.eq(0)
            .html("upload complete ! 
processing response, please wait...")
        .next(outputs.eq(1))
        .html(spinner);
        return data
    })
};

request()
.then(function (data) {
    // do post upload processing stuff
    var process = function() {
    var dfd = new $.Deferred();
    // processing...
    t = setTimeout(function () {
        data.forEach(function (res) {
            results.append(
            $("", {
                "html": $("", {
                    "html": res.value
                })
            }))
        });
        if (results.find("tr").length === len) {
           dfd.resolve("complete !")
        }
    }, 1 + Math.floor(Math.random() * 15000));
        return dfd.promise()
    };
    // do stuff when all post processing complete
    process().then(function(complete) {
       outputs.eq(0).empty()
       .next(outputs.eq(1))
       .html(complete);
       clearTimeout(t);
       t = null;
    })
});

jsfiddle http://jsfiddle.net/guest271314/d2szrs20/

由于您有进度条以显示表单处理要在处理过程中添加更多细节,您可以添加图像如下

它将向用户显示您的表单仍在进行中,在此处创建自定义图像

这可能有助于用户 - 浏览器尚未冻结.