Question

我正在尝试用一个简单的上传栏做一个非常简单的上传图片脚本，我读了一些教程，这就是我尝试的：

我有一个进度条

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

使用此CSS样式

.bar {
    height: 18px;
    background: green;
 }

我的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中的信息，但进度条的一部分什么都不做。我做错了什么？

非常感谢你 ecazorla

Answer 1

progressall选项来自jQuery Upload Plugin，因此您应该将progressall函数回调放在代码的这一部分中：

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

在jQuery中上传进度条

1 个答案: