菜单开关

周梦康 发表于 2018-02-11 6535 次浏览

免费领取阿里云优惠券 我的直播 - 《PHP 进阶之路》

已有轮子

http://fex.baidu.com/webuploader/

原理

前端通过file.slice对文件做切割,后端拼接。

简单实现

用别人的代码做了下实验,https://www.cnblogs.com/fjzhang/p/7227401.html

分片上传,这样就不用担心服务器请求超时了。

前端页面

<div class="layui-container">
    <input type="file" id="file" multiple required>
    <br>
    <div class="layui-progress layui-progress-big" lay-filter="demo">
        <div class="layui-progress-bar layui-bg-green"></div>
    </div>
    <br>
    <button class="layui-btn btnFile">立即提交</button>
    <script type="text/javascript">
        var element = layui.element;
        var time = new Date().getTime();
        var upload = function (file, num) {
            var formData = new FormData();
            var blockSize = 1024 * 1000;
            var blockNum = Math.ceil(file.size / blockSize);
            var nextSize = Math.min(num * blockSize, file.size);
            var fileData = file.slice((num - 1) * blockSize, nextSize);
            formData.append("file", fileData);
            formData.append("fileName", file.name + time);
            $.ajax({
                url: "/admin/op/seoAsk?action=fileUpload",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function (responseText) {
                    element.progress('demo', ((num * 100) / blockNum) + '%');
                    if (file.size <= nextSize) {
                        layer.msg("上传成功");
                        return;
                    }
                    upload(file, ++num);//递归调用
                }
            });
        };
        $(".btnFile").click(function () {
            var file = $("#file")[0].files[0];
            upload(file, 1);
        });
    </script>
</div>

后端实现

$file = isset($_FILES['file']) ? $_FILES['file']:null; //分段的文件

if (!isset($_POST['fileName'])) {
    echo 'failed';
}

$filename = str_replace(["..","/"."\\"],"",$_POST['fileName']);

$content = file_get_contents($file['tmp_name']);
if (!file_put_contents($name, $content, FILE_APPEND)) {
    echo 'failed';
}

优化与改进

  1. 鉴权
  2. 断点续传
  3. 多线程上传

我设想的一个思路:

第一步,客户端发送身份+文件 md5,以及该文件的总分片数。身份可以是登录用户的 uid。
第二步,服务端返回该文件已经上传了的分片索引数组,这样就可以可以实现断点续传。我们设定分片大小是固定的,如果文件 md5 不变,那么它分片的结果也不会变。
第三步,前端根据后端返回的分片索引来并行的上传文件,而不需要像上面那样同步递归。
第四步,服务端收到分片根据客户端身份和文件 md5来进行文件合并。当分片到达首次传输过来的该文件对应的总分片数时才合并。

嗨,老铁,欢迎来到我的博客!

如果觉得我的内容还不错的话,可以关注下我在 segmentfault.com 上的直播。我主要从事 PHP 和 Java 方面的开发,《深入 PHP 内核》作者之一。

[视频直播] PHP 进阶之路 - 亿级 pv 网站架构的技术细节与套路 直播中我将毫无保留的分享我这六年的全部工作经验和踩坑的故事,以及会穿插着一些面试中的 考点难点加分点

评论列表