在jQuery中上载进度条

我正在尝试使用一个简单的上传栏来编写一个非常简单的上传图像脚本，我阅读了一些教程，以下是我尝试的内容：

我有一个进度条

<div id="progressbar">
    <div class="bar" style="width: 50%;"></div>
</div>

还有我的jQuery脚本

$.ajax({
                xhr: function() {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener("progress", function(evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = evt.loaded / evt.total;
                        percentComplete = parseInt(percentComplete * 100);
                        console.log(percentComplete);
                        $('#progressbar .bar').css('width',percentComplete + '%');
                        if (percentComplete === 100) {
                        }
                    }
                }, false);
                return xhr;
                },
                url:'upload.php', 
                type:'POST', 
                contentType:false, 
                data:data, 
                processData:false, 
                cache:false, 
                success: function(result) {
                console.log(result);
                }
            }).done(function(msg){
                $("#cargados").hide().html(msg).fadeIn("fast"); 
            }); 

将文件发送到upload.php的部分工作正常，并在#cargados中显示信息，但progressbar的部分什么也没做。我做错了什么

多谢各位

---

ecazorla

progressall选项来自jQuery上传插件，因此您应该将progressall函数回调放在代码的这一部分：

$('#fileupload').fileupload({
    /* ... */
    progressall: function (e, data) {
    var barra = parseInt(data.loaded / data.total * 100, 10);
    $('#progressbar .bar').css(
            'width',
            barra + '%'
    );
}

---

您的HTML可能有问题。你的#progressbar.bar有高度吗？你在使用jQuery文件上传插件吗？将你的数学改为

（data.loaded/data.total）*100

使用选项

async

，设置为

false

is

progresall

ajax的正确方法？

$('#fileupload').fileupload({
    /* ... */
    progressall: function (e, data) {
    var barra = parseInt(data.loaded / data.total * 100, 10);
    $('#progressbar .bar').css(
            'width',
            barra + '%'
    );
}