15年软件开发经验,只做源码定制!

原创设计定制开发

满足您的个性化需求

当前位置：首页前端开发 js

0 0

layui分片上传

闫志林| 发布于 2022-01-05 21:42:45| 931阅读| 0点赞| 0评论

Layui分片上传文件

前端部分

<html>
<head>
	<link href="./layui/css/layui.css" rel="stylesheet" type="text/css" />
head>
<body>
<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>
div>

<script src="./layui/layui.js">script>
<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>bodyhtml>php

php


		$uploaddir = 'upload/source/' . date("Ymd") . '/';
        if (!is_dir($uploaddir)) {
            mkdir($uploaddir, 0777, true);
        }
        $status = 1;
		var_dump($_FILES['file']);die;
        //上传文件要保存的路径
        $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);