FormData + ajax 实现上传加进度条

function upload(){
var mypic = document.getElementById('file').files[0];
//创建一个FormData空对象,然后使用append方法添加key/value
    var fd = new FormData();
    fd.append("video",mypic);
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState==4 && xhr.status==200){
            alert(xhr.responseText);
           // var res = $.parseJSON(xhr.responseText);
            //alert(res.code);
        }
    }
    //侦查当前附件上传情况
    xhr.upload.onprogress = function(evt){
        //侦查附件上传情况
        //通过事件对象侦查
        //该匿名函数表达式大概0.1秒执行一次
        var loaded = evt.loaded;//已经上传大小情况
        var tot = evt.total;//附件总大小
        var per = Math.floor(100*loaded/tot);  //已经上传的百分比
        $('#tip').html("已上传"+per + "%,请稍后...");
    }
    xhr.open("post","upload.php");
    xhr.send(fd);
}

参与评论