js上传文件显示进度条

使用XMLHttpRequest 技术解决

 

1 html部分

                        <div class="form-group">
                            <label class="col-sm-2 control-label">文件</label>

                            <div>
                                <input type="file" id="filepath" >
                                <span id="progress" style="color: red">进度条</span>
                            </div>
                        </div>

 

2 js 部分

//文件进度条
    $("#filepath").bind("change", function () {

        //创建对象
        var formData = new FormData();
        formData.append('filepath', $("#filepath").get(0).files[0]);


        var xhr = new XMLHttpRequest();
        xhr.responseType = "json";

        //post提交，你的请求地址，是否异步
        xhr.open('POST', '/your url', true);
        //回调是否成功
        xhr.onload = function (e) {
            if (this.status == 200) {
                console.log("success")
            }
        };

        //文件进度监听
        xhr.upload.onprogress = function (even) {
            console.log(even)
            var loaded = even.loaded; //已上传的大小
            var total = even.total; //总大小

            console.log("已上传："+loaded)
            console.log("总大小："+total)

            var num = Math.floor((loaded / total) * 100) + "%" //转换成百分比
            $("#progress").text(num)
        };
        //提交请求
        xhr.send(formData)
    })

 

3 结果展示

 

完！！！