layui 分片上传

参考：

　　https://blog.csdn.net/robinhunan/article/details/102853511

       https://blog.csdn.net/qq_42687916/article/details/103828242

 

upload.php：

        $uploaddir = 'upload/source/' . date("Ymd") . '/';
        if (!is_dir($uploaddir)) {
            mkdir($uploaddir, 0777, true);
        }
        $status = 1;
        //上传文件要保存的路径
        $fname = sprintf($uploaddir . '%s.%s', md5($_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);
        }
        $res = ['status' => $status];
        //最后一片文件
        if ($_POST['totalPage'] == $_POST['page']) {
            $status = 2;
            $newfilename = str_replace(md5($_POST['fileName']), uniqid(), $fname);
            rename($fname, $newfilename);
            $res = ['status' => $status, 'url' => "/" . $newfilename];
        }
        //返回上传状态
        echo json_encode($res);

layui:

<div class="layui-input-inline w300">
   　　<input type="text" class="layui-input field-source" name="source" lay-verify="required" autocomplete="off" placeholder="" readonly >
</div>
<button type="button" class="layui-btn" id="fileUpload">上传</button>
<div>
    <input type="hidden" id="totalPage" value="0"/>
    <input type="hidden" id="page" value="1"/>
    <input type="hidden" id="status" value="0"/>
    <div class="mask"></div>
    <div class="loading">
        <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="uploadProgress">
            <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
        </div>
    </div>
    <style type="text/css">
        .mask{position:fixed;width:100%;height:100%;top:0;left:0;background:#000;opacity:0.8;filter:alpha(Opacity=80);-moz-opacity:0.8;z-index:999;display:none;}
        .loading{position:fixed;width:300px;left:50%;margin-left:-150px;top:200px;height:18px;border-radius:10px;background:#fff;z-index:9999;overflow:hidden;display:none;}
    </style>
</div>
<script>
    var formData = {:json_encode($data_info)};
    layui.use([ 'upload', 'element'], function () {
        var $ = layui.jquery
            , upload = layui.upload;
        var element = layui.element;
        upload.render({
            elem: '#fileUpload',
            url: 'upload.php', //处理上传文件接口
            accept: 'file',
            auto: false,
            acceptMime: '.mp4',//允许上传的文件类型
            choose: function (obj) {
                element.progress('uploadProgress', '0%');
                $('.mask').show();
                $('.loading').show();
                var data = this.data;
                var files = obj.pushFile();
                var LENGTH = 1024 * 1024; //每片文件大小
                for (var key in files) {
                    var file = files[key];
                    var totalSize = file.size;
                    var totalPage = Math.ceil(totalSize / LENGTH);
                    $('#totalPage').val(totalPage);
                    $('#page').val('1');
                    $('#status').val('1');
                    var fileName = file.name;
                    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 {
                            if (status == 1) {
                                $('#status').val('0');
                                data.fileName = fileName;
                                data.page = page;
                                data.totalPage = totalPage;
                                data.fileExt = fileExt;
                                obj.upload(key, 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');
                    $('.field-source').val(res.url);
                    layer.msg('上传成功', {time: 1000, anim: 0}, function () {
                        $('.mask').hide();
                        $('.loading').hide();
                    });
                } else { //上传错误
                    $('#status').val('-1');
                    element.progress('uploadProgress', '0%');
                    console.log(!typeof (res.url) == "undefined");
                    layer.msg("上传失败，请重试", {time: 3000, anim: 0}, function () {
                        $('.mask').hide();
                        $('.loading').hide();
                    });
                }
            },
            error: function(){
                $('.mask').hide();
                $('.loading').hide();
            }
        });
    });
</script>