如何以百分比显示进度条？

Question

如何以百分比显示屏幕上的上传进度？ 我想显示以0％开头的栏，并从percentComplete变量输出百分比。 上传完成后，我希望在进度栏中看到消息已完成。 如果有人可以提供一些示例，我将不胜感激。 谢谢。

<div>Select file for upload:   
    <input type="file" id="fileUpload" name="fileUpload" onChange="fileUpload()"/>
    <span id="showBar"></span>
</div>

这是我的JQuery函数：

function fileUpload(){
    var reader = new FileReader();
    var file = fileExist.files[0];

    reader.onload = function(e) {
        var text = reader.result.split(/\r\n|\n/);
        var myForm = new FormData(document.getElementById('myForm'));                       

        $.ajax({
            /*Start-Progress Bar Code*/
            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);

                        if(percentComplete === 100){
                            console.log("Successfully uploaded!");
                        }
                    }
                },false);
                return xhr;
                },
                /*End*/
                type: 'POST',
                url: 'FileUpload.cfc?method=uploadFile',
                data: new FormData($('#myForm')[0]),
                cache: false,
                contentType: false,
                enctype: 'multipart/form-data',
                processData: false,
                dataType: 'json'
            }).done(function(obj){
                if(obj.STATUS === 200){
                    $('#myForm')[0].reset();
                }else{
                    alert('Error!');
                }
            }).fail(function(jqXHR, textStatus, errorThrown){
                alert(errorThrown);
            })
    }
    reader.readAsText(file, 'UTF-8');
}

Answer 1

您是否考虑过plupload？ 这是他们的核心示例，带有简单的文本百分比： http : //www.plupload.com/examples/core