利用XMLHttpRequest level 2 实现文件异步上传

function upload(){

    //1、准备FormData
    var fd = new FormData();
    fd.append("myfile",$('#myfileId')[0].files[0]);

    //创建xhr对象
    var xhr = new XMLHttpRequest();

    //监听状态，实时响应
    //xhr和xhr.upload 都有progress事件，xhr.progress是下载进度，xhr.upload.progress是上传进度
    xhr.upload.onprogress = function(event){
        if(event.lengthComputable){
            var percent = Math.round(event.loaded * 100 / event.total);
            console.log('%d%',percent);
            $('#jindu').text(percent);
        }
    }

    //传输开始事件
    xhr.onloadstart = function(event){
        console.log('load start');
        $('#shangchuan').text('开始上传');
        $('#stopBtn').one('click',function(){
            xhr.abort();
            $(this).hide();
        })
        loading(true);
    }

    //ajax过程成功完成事件
    xhr.onload = function(event){
        console.log('load success');
        $('#shangchuan').text('上传成功');
        console.log(xht.responseText);
        var ret = JSON.parse(xhr.responseText);
        console.log(ret.fname);
    }

    //ajax过程发生错误事件
    xhr.onerror = function(event){
        console.log('error');
        $('#shangchuan').text('发生错误');
    }

    //ajax被取消
    xhr.onabort = function(event){
        console.log('abort');
    }

    //发起ajax请求传送数据
    xhr.open('POST','/uploadFile',true);
    xhr.send(fd);
}