1. 程式人生 > 實用技巧 >layui 分片上傳

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>