JS 异步分段上传文件

<link href="__PUBLIC__/admin/css/myProgress.css" rel="stylesheet"> 
<script src="__PUBLIC__/admin/js/jquery.myProgress.js"></script>

<div>
    <div>
        <form id="myForm">
          <div>
            //上传文件时由用户指定文件名
            <label for="FileName">File Name</label>
            <input type="text" name="title" class="form-control" id="FileName">
          </div>
          <div>
            <label for="myFile">Chose File</label>
            <input type="file" id="myFile">
            <div class="progress-out" id="progress">
                <div class="percent-show"><span>0</span>%</div>
                <div class="progress-in"></div>
            </div>
          </div>
        </form>
        <button type="button" class="btn btn-default" id="btn">Submit</button>
    </div>
</div>

<script>
//初始化上传
function initUpload() {
    var chunk = 1000*1024;   //每片大小
    var input = document.getElementById("myFile");  //input file
    input.onchange = function (e) {
        //获得上传的文件
        var file = this.files[0];
        //如果大于指定大小 提示错误
        if(file.size > 1*1024*1024*1024){
            $('#help_msg').removeClass('help-block').addClass('error-block');
            return ;
        }else{
            $('#help_msg').css('display','none');
        }
        // 开启进度条
        $("#progress").css('display','block');
        $("#progress").myProgress({speed: 1000, percent: 0, width: "200px", height: "12px"});
        
        var query = {};
        var chunks = [];

        if (!!file) {
            var start = 0;
            //文件分片
            for (var i = 0; i < Math.ceil(file.size / chunk); i++) {
                //最后一段取文件的真实大小
                var end = 0;
                if(i == (Math.ceil(file.size / chunk)-1)){
                    end = file.size;
                }else{
                    end = start + chunk;
                }
                chunks[i] = file.slice(start , end);
                start = end;
            }
            
            // 采用post方法上传文件
            // url query上拼接以下参数，用于记录上传偏移
            // post body中存放本次要上传的二进制数据
            query = {
                fileName : file.name,
                fileSize: file.size,
                dataSize: chunk,
                nextOffset: 0
            }

            upload(chunks, query, successPerUpload);
        }
    }
}

// 执行上传
function upload(chunks, query, cb) {
    //对象转字符串 用&连接
    var queryStr = Object.getOwnPropertyNames(query).map(key => {
        return key + "=" + query[key];
    }).join("&");

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/Shop/index.php/Admin/File/upload_file?" + queryStr);
    xhr.overrideMimeType("application/octet-stream");
    
    //获取post body中二进制数据
    var index = Math.floor(query.nextOffset / query.dataSize);
    getFileBinary(chunks[index], function (binary) {
        if (xhr.sendAsBinary) {
            xhr.sendAsBinary(binary);
        } else {
            xhr.send(binary);
        }

    });

    xhr.onreadystatechange = function (e) {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                var resp = JSON.parse(xhr.responseText);
                //通过返回数据更新进度条
                var precent = Math.ceil((resp.offset / query.fileSize) * 100);
                $("#progress").myProgress({speed: 1000, percent: precent, width: "200px", height: "12px"});
                // 接口返回nextoffset
                // resp = {
                //     isFinish:false,
                //     offset:100*1024
                // }
                if (typeof cb === "function") {
                    cb.call(this, resp, chunks, query)
                }
            }
        }
    }
}

// 每片上传成功后执行
function successPerUpload(resp, chunks, query) {
    if (resp.isFinish === true) {
        //上传完成给出提示
        $('#help_msg').css('display','block').addClass('error-block').html('success!');
    } else {
        //未上传完毕
        query.nextOffset = resp.offset;
        upload(chunks, query, successPerUpload);
    }
}

// 获取文件二进制数据
function getFileBinary(file, cb) {
    var reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = function (e) {
        if (typeof cb === "function") {
            cb.call(this, this.result);
        }
    }
}
//初始化上传
initUpload();

//ajax模拟提交表单
$(function(){
    $('#btn').click(function(){
        var fd = new FormData(document.querySelector('#myForm'));
        var input = document.getElementById("myFile");    //input file
        var file = input.files[0];
        if(!file){
            $('#help_msg').css('display','block').addClass('error-block').html('please chose the file !');
            return ;
        }
        fd.append('FileName',file.name);
        fd.append('size',file.size);
        $.ajax({
            url : "/Shop/index.php/Admin/File/add",
            type: "POST",
            async : true,
            data: fd,
            processData: false,  // 不处理数据
            contentType: false,   // 不设置内容类型
            success : function(result){
                console.log(result);
                if(result.res == 1){
                    window.location.href = "http://localhost:8080/Shop/index.php/Admin/File/index";
                }else{
                    $("#help_msg_1").css('display','block').html('upload faild ' + $result.msg);
                }
            }
        });
    })
})

</script>