layui文件分片上传,切片上传

需要用到layui插件，在需要的页面顶部引入

在页面用

div class="layui-input-block">
button type="button" class="layui-btn" id="fileUpload">i class="layui-icon">i>上传文件button>
div>

这里用layui的方式去请求后台方法

script>
    layui.use(['form', 'upload', 'element'], function () {
        var form = layui.form;
        var upload = layui.upload;
        var element = layui.element;
        var $ = layui.$;
        upload.render({
            elem: '#fileUpload',
            url: 'upload', //处理上传文件接口
            accept: 'file',
            auto: false,
            acceptMime: '*.*',//允许上传的文件类型
            choose: function (obj) {
                element.progress('uploadProgress', '0%');//进度条清0
                $('.mask').show();//遮罩层
                $('.loading').show();//显示进度条
                var data = this.data;
                var files = obj.pushFile();//选择的文件推入obj
                var LENGTH = 500 * 1024; //每片文件大小
                obj.preview(function (index, file, result) {
                    var totalSize = file.size;//文件总大小
                    var totalPage = Math.ceil(totalSize / LENGTH);//总共上传的片数
                    $('#totalPage').val(totalPage);
                    $('#page').val('1');
                    $('#status').val('1');
                    var fileName = file.name;//获取文件名
                    $('#name').val(fileName);
                    var fileExt = fileName.substr(fileName.lastIndexOf('.') + 1);//获取文件后缀
                    fileName = fileName.substr(0, fileName.lastIndexOf('.'));//获取不带后缀的文件名
                    var progressTimer = setInterval(function () {
                        var totalPage = parseInt($('#totalPage').val());
                        var page = parseInt($('#page').val());
                        var status = $('#status').val();
                        if (parseInt(totalPage) == parseInt(page) && (parseInt(status) == 2 || parseInt(status) == -1)) {
                            clearInterval(progressTimer);//上传成功或失败停止上传
                        } else {
                            //状态为1的时候上传
                            if (status == 1) {
                                $('#status').val('0');
                                data.fileName = fileName;
                                data.page = page;
                                data.totalPage = totalPage;
                                data.fileExt = fileExt;
                                obj.upload(index, file.slice((page - 1) * LENGTH, page * LENGTH));//从文件中截取进行分片上传
                            }
                        }
                    }, 100);
                });
            },
                done: function (res) {
                    if (res.status == 1) { //分片上传
                        var page = parseInt($('#page').val());
                        var totalPage = parseInt($('#totalPage').val());
                        element.progress('uploadProgress', Math.ceil(page * 100 / totalPage) + '%');//更新进度条
                        page = page + 1;//上传下一片
                        console.log(page);
                        $('#page').val(page);
                        $('#status').val('1');
                    } else if (res.status == 2) { //上传完成
                        element.progress('uploadProgress', '100%');
                        $('#status').val('2');
                        $('#downUrl').val(res.downUrl);
                        layer.msg('上传成功', {time: 1000, anim: 0}, function () {
                            $('.mask').hide();//隐藏遮罩层
                            $('.loading').hide();//隐藏进度条
                        });
                    } else { //上传错误
                        $('#status').val('-1');
                        element.progress('uploadProgress', '0%');
                        console.log(!typeof (res.downUrl) == "undefined");
                        if (typeof (res.downUrl) == "undefined") {
                        } else {
                            $('#downUrl').val(res.downUrl);
                        }
                        layer.msg("上传失败，请重试", {time: 3000, anim: 0}, function () {
                            $('.mask').hide();
                            $('.loading').hide();
                        });
                    }
                },
 
                error: function () {
                $('.mask').hide();
                $('.loading').hide();
            }
        });
    });
script>

通过后台方法去接收到数据拼接起来文件

 public function upload()
    {
        $status = 1;
//上传文件要保存的路径
        $fname = sprintf(public_path() . 'tmp\%s.%s', $_POST['fileName'], $_POST['fileExt']);
        $data = file_get_contents($_FILES['file']['tmp_name']);
 
        if ($_POST['page'] == 1) {
            file_put_contents($fname, $data);
        } else {
            //其余文件追加到文件末尾
            file_put_contents($fname, $data, FILE_APPEND);
        }
//最后一片文件
        if ($_POST['totalPage'] == $_POST['page']) {
            $status = 2;
            $res1 = fen($fname);
        }
//返回上传状态
        $res = ['status' => $status, 'downUrl' =>isset($res1)?$res1:''];
        return json($res);
}