Thinkphp + Layui 的大文件带进度条的上传

php相关 同时被 3 个专栏收录
6 篇文章 0 订阅
1 篇文章 0 订阅
2 篇文章 0 订阅

提示:优美界面,直接能够用在生产当中的大文件上传代码


前言

提示:网络时代的变化,网速的加快,对于大文件的上传下载都有了更高的需求。但是,发现没有一个比较好看,讲解清晰的thinkphp 大文件上传的教程。


一、前端Layui 的上传模块实现

注:需要引入layui,如果要带进度条的话,layui的版本必须是2.5.5版本以上才能够支持。
使用layui的上次模块进行文件上传时,有一个弊端就是上传的文件一定不能超过php.ini中的单个文件上传大小的限制,如果超过了限制的大小则服务器端无法获取到上次的文件。

1、html代码

直接上代码:

<div class="wrap js-check-wrap">
        <div class="layui-upload" style="margin-top: 50px;">
            <div class="layui-card" style="height: 120px;padding: 20px;">
                
                <div class="xzwj">
                    <button type="button" class="layui-btn layui-btn-primary" id="test8">选择文件</button>
                </div>
                <div class="layui-progress" lay-filter="demo" lay-showPercent="yes"
                    style="width: 300px;margin: 30px 0 10px 0;">
                    <div class="layui-progress-bar" lay-percent="0%"></div>
                </div>
                <div>
                    <button style="display: none;" type="button" class="layui-btn" id="test9">开始上传</button>
                    <input type="hidden" name="">
                </div>
            </div>
        </div>
    </div>

2、JS代码

		var upload = '';
        var element = '';

        layui.use(['upload', 'element'], function () {
            upload = layui.upload;
            element = layui.element;

            //选完文件后不自动上传
            upload.render({
                elem: '#test8',
                url: '{:U("upload")}',
                auto: false,
                accept: 'video',
                exts: 'mp4',
                bindAction: '#test9',
                choose: function (obj) {
                    var name = $('.layui-upload-file').val();
                    $('.xzwj').append("<span style='padding-left:20px'>"+name+"</span>");
                    $('#test9').show();
                    element.progress('demo', '0%');
                },
                before: function (obj) {
                    layer.load(1, { shade: '#fff' });
                },
                progress: function (n, elem) {
                    var percent = n + '%' //获取进度百分比
                    element.progress('demo', percent); //可配合 layui 进度条元素使用
                },
                done: function (res) {
                    layer.closeAll();
                    layer.msg('上传成功');
                    $('#test9').hide();
                },
                error: function () {
                    console.log('上传失败');
                }
            });

        });

效果如下图:

上传文件效果图

上传成功后

3、PHP 代码

在thinkphp下的上传文件代码:

public function upload(){
	$upload = new \Think\Upload(); // 实例化上传类
	$upload->maxSize   =     314572800; // 设置附件上传大小
	$upload->exts      =     array('mp4'); // 设置附件上传类型
	$upload->rootPath  =     './Uploads/'; // 设置附件上传根目录
	$upload->savePath  =     ''; // 设置附件上传(子)目录
	// 上传文件 
	$info   =   $upload->upload();
	
	$pathinfo = $upload->rootPath .$info['savepath'].$info['savename'];
	
	if (!$info) { // 上传错误提示错误信息
		echo json_encode(['status'=>'201','info'=>$upload->getError()]);
	} else { // 上传成功
		echo json_encode(['status'=>'200','info'=>$pathinfo]);
	}
}

总结

总体来说,Layui的使用还是比较简单的,再加上PHP框架的加持,写一个上传功能用不了多复杂。但是layui没有进行分片上传的封装,目前只能是按照一个文件来上传,目前适合上传一些图片、小的文件、视频。对于大的视频、文件的话建议使用分片上传。下期来介绍一个分片上传的实例。

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值