使用 jQuery progressBar 做文件上传的进度条指示

最新推荐文章于 2025-09-05 11:31:06 发布

转载最新推荐文章于 2025-09-05 11:31:06 发布 · 572 阅读

文章标签：

#jquery #function #integer #upload #timer #ajax

JS 专栏收录该内容

67 篇文章

订阅专栏

本文介绍如何利用jQuery库创建文件上传进度条，并通过AJAX实现上传进度的实时更新。

http://www.oschina.net/code/snippet_12_1313
var progress_key = '4cd0f29463edb';
 
// this sets up the progress bar
$(document).ready(function() {
    $("#uploadprogressbar").progressBar();
});
 
// fades in the progress bar and starts polling the upload progress after 1.5seconds
function beginUpload() {
    // uses ajax to poll the uploadprogress.php page with the id
    // deserializes the json string, and computes the percentage (integer)
    // update the jQuery progress bar
    // sets a timer for the next poll in 750ms
    $("#uploadprogressbar").fadeIn();
 
    var i = setInterval(function() { 
        $.getJSON("demo.php?id=" + progress_key, function(data) {
            if (data == null) {
                clearInterval(i);
                location.reload(true);
                return;
            }
 
            var percentage = Math.floor(100 * parseInt(data.bytes_uploaded) / parseInt(data.bytes_total));
            $("#uploadprogressbar").progressBar(percentage);
        });
    }, 1500);
}