【Ajax】ajax上传文件及进度条的实现

    html5上传是同步上传的方式，所以能够实现进度条的显示。

    1.上传文件：

    首先我们用ajax来取得的file对象：

    

    var file = null;
    var input = $("#file_upload");
    //文件域选择文件时, 执行readFile函数
    input.addEventListener('change',readFile,false);
    function readFile(){ 
        file = this.files[0]; 
    }

    然后用FormData()送到后台。

    

var fd = new FormData();
fd.append("file", file);

    2.监听事件：给XMLHttpRequest添加上传中的监听事件，可以得到已上传的文件大小，用以实现进度条的显示。

    

 //监听事件
xhr.upload.addEventListener("progress", uploadProgress, false);

    完整代码如下：

    
    
    

        

        
    
    
    0%

    效果如下：

Author：立礼

Sign：人生不要有太多的幻想，而要有更多的行动