php普通分片上传

最新推荐文章于 2025-02-24 10:53:50 发布

蓦然回首何处是

最新推荐文章于 2025-02-24 10:53:50 发布

阅读量89

点赞数

本文链接：https://blog.youkuaiyun.com/pure_one/article/details/119451020

版权

html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
    <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>
</head>
<body>
<div class="layui-main">
    <form class="layui-form" method="post" action="">
        <input type="hidden" name="form_submit" value="ok" />
        <div class="layui-form-item">
            <label class="layui-form-label">上传：</label>
            <input type="hidden" id="totalPage" value="0"/>
            <input type="hidden" id="page" value="1"/>
            <input type="hidden" id="status" value="0"/>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="fileUpload"><i class="layui-icon"></i>上传文件</button>
                <div id="img">

                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<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>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<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: '{:url("Demo/upload")}', //处理上传文件接口
            accept: 'file',
            auto: false,
            acceptMime: '*.*',//允许上传的文件类型
            choose: function (obj) {
                element.progress('uploadProgress', '0%');
                $('.mask').show();
                $('.loading').show();
                var data = this.data;
                var files = obj.pushFile();
                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 {
                            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');


                    var html='<img src="'+res.downUrl+'" width="50px" height="50px" alt="">'
                        html+='<input type="hidden" name="pic" value="'+res.downUrl+'">'
                    $('#img').html(html)


                    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>
</body>
</html>

php代码：

public function upload(){
    //处理分片上传文件
    $status = 1;
    $downUrl="";
    //上传文件要保存的路径
    $fname = sprintf('tmp/%s.%s', $_POST['fileName'], $_POST['fileExt']);
    $data = file_get_contents($_FILES['file']['tmp_name']);


    //分片上传中
    if ($_POST['page'] != 2) {
        Cache::store('redis')->zIncrBy('file_cat',$_POST['page'],$data);
    }


    //上传完成，进行云上传
    if ($_POST['totalPage'] == $_POST['page']) {
        $status = 2;
        //进行上传
        $res=Cache::store('redis')->zRange('file_cat',0,$_POST['totalPage']);

        foreach ($res as $v){
            file_put_contents($fname, $v, FILE_APPEND);
        }

        Cache::store('redis')->delete('file_cat');
        $downUrl="./".$fname;
        //云上传
        $downUrl=Index::upload($downUrl);
    }

    //最后一片文件

    //返回上传状态
    $res = ['status' => $status, 'downUrl' => "https://".$downUrl];
    echo json_encode($res);
}