jquery 上传文件 进度条

Jquery上传文件进度条是一种非常好用的效果。当我们上传一些大文件或者多个文件时，可以使用这种进度条来提示用户文件上传的进程，让用户知道上传的状态。

//HTML代码
<div id="progress"></div>
<input type="file" id="file" name="file" />

//JS代码
$(function() {
    // 获取文件上传的文件对象
    var file = document.getElementById("file").files[0];

    // 创建ajax实例对象，用来上传文件
    var xhr = new XMLHttpRequest();

    // 设置ajax相关的事件处理方法，监听ajax的进度等
    xhr.upload.addEventListener("progress", function(evt) {
        var progress = document.getElementById("progress");
        var percent = Math.round(evt.loaded / evt.total * 100);
        progress.innerHTML = percent + "%";
        // 如果上传完成，隐藏进度条
        if(percent == 100) {
            progress.style.display = "none";
        }
    }, false);

    // 上传文件到服务器
    xhr.open("POST", "upload.php", true);
    xhr.send(file);
});

使用这段代码可以很好地实现上传文件进度条的效果。其中，progress表示进度条的DOM对象，file表示上传的文件对象，upload表示监听上传事件，progress表示上传进度，percent表示上传进度的百分比，send表示将文件上传到服务器。