tp5+layui完成上传大文件引见_WEB前端开发,layui

起首记录下变动文件上传大小的一些设置信息.

翻开php.ini

file_uploads = on     //是不是许可经由历程HTTP上传文件的开关,默许开启

upload_tmp_dir    //临时文件贮存的途径

upload_max_filesize 20M //许可上传的文件最大值

post_max_size 22M //经由历程表单POST所能上传的大小

max_execution_time 600  //单个PHP页面许可运转的最大时候

max_input_time 600 //单个PHP页面吸收数据所需的最大时候,默许60秒

memory_limit 256M //单个PHP页面实行历程当中可占用的最大内存,默许8M

经由历程变动上述的设置就能够调解许可文件上传的大小。(有的还须要调解效劳器的一些设置)

补充:413毛病 假如效劳器是nginx的话,须要变动设置nginx_conf 中的client_max_body_size 24M,设置吸收客户端发送过来包的最大值。记得放在http里,重启效劳器,用restart,不要用reload。

接着入手下手完成文件的支解上传。

文件经由历程HTML的input标签的file来挑选文件上传。经由历程H5新对象FileReader。就像字面上的意义一样FileRaeder对象就是一个读取当地文件的对象。FileReader对象能够将当地文件读取后以base64位的编码返回。(细致有关FileReader对象的运用,请自行百度,或许浏览以下博文,写的很细致。

现实开发

第一次尝试

经由历程input file标签来挑选文件

采纳FileReader对象对文件举行读取

经由历程ajax异步将文件的base64编码发送给效劳端

效劳端吸收后对编码举行解码并保留到文件中。

测试效果失利,当文件过大时所编码的长度也越长,经由历程ajax异步提交参数的最大上线为8000个字节。

第二次尝试

在第一次的基础上对所猎取到的base64编码举行支解上传

将所猎取的base64编码字符串分红几份并举行编号,在轮回挪用ajax举行发送

效劳端吸收到后对数据举行解码,以编号举行定名

吸收完一切小文件后,挪用背景要领将小文件举行兼并

测试效果失利,当上传文件凌驾1G时,浏览器就崩溃了。应该是在读取文件时,文件过大,一次性读出返回base64编码过大,致使页面崩溃。

第三次尝试

在第二次的基础上想着在读取文件猎取编码的历程也举行分批读取来防备一次性读取过大的文件致使页面崩溃。

这边就要运用到H5的file.slice()来对文件举行分块,从而完成分批读取分批上传。

经由历程FlieReader对象来读取文件快

经由历程ajax将base64编码异步发送到效劳端

效劳端吸收数据举行解码和文件保留

测试胜利,测试上传了快4G的文件。

(因为将文件举行了分段,所以在上传大文件时会提议大批的ajax要求,发生大批的并发,可能会致使页面再次崩溃。所以我才用错开要求的体式格局。减慢发生ajax要求的速率。)

细致完成代码

接下来贴点代码

前端框架:layui

后端框架:tp5

页面代码:

<div class="layui-form-item">
    <label class="layui-form-label">视频上传</label>
    <div class="layui-input-block layui-upload-video-btn">
        <ul>
            <li class="img-upload">
                <label></label>
                <input type="file" class="video-upload-file layui-upload-video-file-btn" name="file"/>
                <video width="320" height="240" controls style="display: none">
                    <source src="" type="video/mp4">
                    <source src="" type="video/ogg">
                    您的浏览器不支持Video标签。
                </video>
                <span style="display: none">X</span>
                <input type="hidden" class="video-link-id" name="video_link_id" value="">
            </li>
            <li>//视频上传会比较久(上传完会有提醒)</li>
        </ul>
    </div>
</div>

js代码:

$('.video-upload-file').on('change',function(){
        layer.msg('正在提交视频......');
        //隐蔽按钮,显现进度条
        $('.layui-upload-video').hide();
        $('.layui-progress-ads').show();
        var loads_video = layer.load(2,{shade: [0.2, '#3a3535']});      //发生加载圈,制止用户其他操纵
        var thisFile = $(this);
        var reader=new FileReader();
        var file_size = this.files[0].size;     //文件大小
        var limit = 8388608;        //每次读取文件的大小
        // var limit = 1048000;        //每次读取文件的大小
        var up_count = Math.ceil(file_size/limit);     //总上传次数
        var type = this.files[0].type.substr(this.files[0].type.indexOf('/')+1);   //文件范例
        var success_num = 0;        //用于寄存上传胜利的数据的id
        var check = 1;             //防备屡次兼并
        console.log('文件大小:'+this.files[0].size);
        console.log('文件范例:'+type);
        console.log('支解上传次数:'+up_count);
        //分段读取文件
        readFile(this.files[0], 0, limit);
        function readFile(file, num, limit){
            // console.log('第'+num+'次:'+num*limit);
            reader.readAsDataURL(file.slice(num*limit, (num+1)*limit));
            reader.onload = function(e){
                console.log(reader.result.length);
                console.log(reader.result);
                //异步base64的数据传输到效劳器
                ajax_way(reader.result, name, num+1, thisFile);
                if((num+1)*limit <= file_size){
                    readFile(file, num+1, limit);
                }
            }
        }
        function ajax_way(data,name,num, thisFile){
            //防备一次性生成太多的要求
            if(num+1 > 60){
                // console.log('守候两秒');
                sleep(6000);
                // console.log('守候完毕');
            }
            $.ajax({
                url: "<?= url('admin/video/up_mfile');?>",
                type: "POST",
                data: {video:data,name:name,num:num},
                // async:false,      //是不是采纳同步,串行发送要求
                success: function (data) {
                    if(data.code == 1){
                        //上传胜利,胜利次数加一
                        success_num++;
                        console.log(num+'完成');
                        console.log('已完成:'+success_num+'/'+up_count);
                        //盘算完成的百分比
                        var precentage = Math.ceil((success_num/up_count)*100);
                        //变动进度条显现
                        $('.layui-progress-ads-btn').attr('lay-percent', precentage+'%');
                        $('.layui-progress-ads-btn').css('width', precentage+'%');
                        $('.layui-progress-text').html(precentage+'%');
                        //假如支解文件都上传了则挪用接口兼并文件
                        if(success_num == up_count && check == 1){
                            check = 0;
                            success_num = 0;
                            merge_mfile(name, up_count, thisFile, type);
                        }
                    }
                },
                error:function(e){
                    console.log('失足了:'+num);
                    //传输失足则从新上传
                    ajax_way(data, name, num, thisFile);
                }
            });
        }

        //兼并文件
        function merge_mfile(name, count, thisFile, type){
            $.ajax({
                url:"<?= url('admin/video/merge_mfile');?>",
                data:{name:name, count:count, type:type},
                type:"POST",
                success:function(data){
                    if (data.code==1){
                        layer.close(loads_video);
                        layer.msg('视频提交胜利');
                        thisFile.siblings('.video-link-id').val(data.data);
                    }else{
                        layer.msg('视频提交非常请从新提交');
                        //显现按钮,隐蔽进度条
                        $('.layui-upload-video').show();
                        $('.layui-progress-ads').hide();
                        //将进度条置零
                        $('.layui-progress-ads-btn').attr('lay-percent', '0%');
                        $('.layui-progress-ads-btn').css('width', '0%');
                        $('.layui-progress-text').html('0%');
                        //清空已选中的文件
                        var file = $(".layui-upload-video-file-btn");
                        file.after(file.clone().val(""));
                        file.remove();
                    }
                }
            })
        }
        function sleep(n) { //n示意的毫秒数
            var start = new Date().getTime();
            while (true) if (new Date().getTime() - start > n) break;
        }
        return false;
    });

更多layui学问请关注layui运用教程栏目。

以上就是tp5+layui完成上传大文件引见的细致内容,更多请关注ki4网别的相干文章!