html5 XMLHttpRequest 头像上传带进度

            function uploadFile() {
                popup('#msg', '正在上传头像', null, false);  
                var fd = new FormData();
                fd.append("fileToUpload", document.getElementById('headfile').files[0]);
                var xhr = new XMLHttpRequest();
                xhr.upload.addEventListener("progress", uploadProgress, false);
                xhr.addEventListener("load", uploadComplete, false);
                xhr.open("POST", url);
                xhr.send(fd);
            }
            function uploadProgress(evt) {
                if (evt.lengthComputable) {
                    var percentComplete = Math.round(evt.loaded * 100 / evt.total);
                    $('#msg>div>p').text('正在上传头像'+ percentComplete.toString() + '%'); 
                } 
            } 
            function uploadComplete(evt) {
                if (evt) {
                    $('#hidheadfile').val(evt.target.responseText);
                    popup('#msg', '头像上传成功,正在提交资料', null, false);
                }
                $.post('', $('#form').serialize(), function (d) {
                })
            } 
            if (document.getElementById('headfile').files.length > 0) {
                uploadFile();
            } else {
                uploadComplete();
            }