使用xhr上传文件并显示进度条代码

//利用formdata上传文件
function upload() {
    //检查是否已经选择文件
    var str = document.getElementById('file').value.length;
    if(str==0){
        alert("您没有选择任何文件,请点击“选择文件”进行选取！");
        return false;
    }else{
        //创建formdata对象
        var fd = new FormData();
        fd.append("file",$("#file")[0].files[0]);
        var xhr = new XMLHttpRequest();
        //文件传输时事件
        xhr.upload.onprogress = function (event) {
            if(event.lengthComputable){
                var percent = Math.round(event.loaded*100 / event.total);
                console.log('%d%',percent);
                $("#progress").css("width",percent+"%");
                $("#progress").text(percent+"%");
            }
        };
        //文件开始传输时事件
        xhr.onloadstart = function (event) {
            $('#mymodal').modal("show");
            $("#closeprogress").hide();
            $("#stop").one("click",function () {
                xhr.abort();
            })
            loading(false);
        };
        //文件上传完成时事件
        xhr.onload = function (event) {
            $(".info").text(xhr.responseText);
            $("#closeprogress").show();
            $("#stop").hide();
        };

        //发生错误时触发的事件
        xhr.onerror = function (event) {
            $(".info").text("上传发生错误，请重试！");
        }
        //ajax被取消时触发的事件
        xhr.onabort = function (event) {
            $(".info").text("用户已终止");
            $("#closeprogress"​).show();
        }
        //发送请求
        xhr.open("post","receive.php",true);
        xhr.send(fd);
    }
}