php tp5大文件分片上传，切片上传，结合layui上传插件，可上传4G文件

已于 2022-02-16 13:12:40 修改
阅读量2.6k 收藏 13
点赞数 1
分类专栏： ThinkPHP5 文章标签： js jquery php
于 2020-04-02 15:32:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NET_class/article/details/105271137
版权

php 大文件分片上传，结合layui上传插件

原理是将文件切成小文件，ajax递归上传，然后在后台再拼接成一个整的文件

  1. html 页面

    <div class="layui-upload">

   <input type="file" style="display: none;" id="fileElem" ></input>
   <button type="button" class="btn btn-primary radius layui-btn-normal" id="fileSelect">选择文件</button>&emsp;<span style="color: #FF5722">每次只能上传1个文件，文件大小“小于等于150M”</span>
   <div class="layui-upload-list">
        <table class="layui-table">
        <thead>
            <tr style="width: 15%"><th>文件名</th>
            <th style="width: 10%">大小</th>
            <th style="width: 65%">进度</th>
            <th style="width: 10%">状态</th>
        </thead>
        <tbody id="demoList"></tbody>
        </table>
    </div>
    <button type="button" class="btn btn-success radius" id="upstart">开始上传</button>

</div>

  2. jq代码（js jq 都用上了，哈哈）

       var fileSelect = document.getElementById("fileSelect"),
       fileElem = document.getElementById("fileElem");
 
       fileSelect.addEventListener("click", function (e) {
 
       if (fileElem) {
           fileElem.click();
           fileElem.addEventListener("change", handleFiles, false); 
         }
         e.preventDefault(); // prevent navigation to "#"
       }, false);
  
 
   var fileList = "";
   function handleFiles(){
 
       fileList = this.files; 
 
       var filecontent = "";
 
       for( var i = 0 ; i < fileList.length ; i++ ){  
 
         // 定义允许上传文件的大小
         var filesize = (fileList[i].size/1024/1024).toFixed(1);
 
         if(filesize >= file_size){
 
           layer.msg('* 文件大小超出限制',{icon:2,time:3000});
           fileList = "";
           return false;
         }
 
         filecontent += '<tr>'+
                         '<td>'+ fileList[i].name +'</td>'+
                         '<td>'+ (fileList[i].size/1024/1024).toFixed(1) +'MB</td>'+
                         '<td>'+
                           '<div class="layui-progress" lay-filter="'+fileList[i].lastModified+'_'+i+'" lay-showPercent="true" lay-filter="progress_'+i+'">'+
                             '<div class="layui-progress-bar" lay-percent="0%"></div>'+
                           '</div>'+
                         '</td>'+
                         '<td id="'+fileList[i].lastModified+'_'+i+'">等待上传</td>'+
                         '<td style="display:none" id="filepath"></td>'+
                       '</tr>';  
       }
       $("#demoList").append(filecontent); 
   } 
 
   
   //---------------
   var upstartBtn = document.getElementById('upstart');
   //---------------
   const LENGTH = 512 * 1024 * 1;
   var start = 0;
   var end = start + LENGTH;
   var blob;
   var blob_num = 1;
   var is_stop = 0
   var file = null;
   var loading;
   //-----------------------------
   var upload_instance = new Upload();
 
   var fileid = 0;
   upstartBtn.onclick = function () {
       for( var i = 0 ; i < fileList.length ; i++ ){ 
         fileid = fileList[i].lastModified+'_'+i;
         upload_instance.addFileAndSend(fileList[i]);
       }
       return false;
   }
 
   function Upload() {
     //对外方法，传入文件对象
     this.addFileAndSend = function (that) {
         // loading
         loading = layer.load(1, {shade: [0.3,'#fff']}); 
 
         file = that;
         blob = cutFile(file);
         sendData(blob, file);
         blob_num += 1;
     }
     //切割文件
     function cutFile(file) {
         var file_blob = file.slice(start, end);
         start = end;
         end = start + LENGTH;
         return file_blob;
     };
     //发送文件
     function sendData(blob, file){
 
         var form_data = new FormData();
         var total_blob_num = Math.ceil(file.size / LENGTH);
         form_data.append('file', blob);
         form_data.append('blob_num', blob_num);
         form_data.append('total_blob_num', total_blob_num);
         form_data.append('file_name', file.name);
         console.log(blob_num);
         console.log(total_blob_num);
         $.ajax({
           url:upload_url,
           type:'post',
           async:true,
           dataType:"json",
           data:form_data,
           contentType:false,
           processData:false,
           success:function(data){
             console.log(data);
             if(data['code'] == 1){
 
               // 进度条和状态设置
               if (total_blob_num == 1) {
                   progress = '100%';
               } else {
                   progress = (Math.min(100, (blob_num / total_blob_num) * 100)).toFixed(2) + '%';
               }
 
               // 进度条
               layui.element.progress(fileid, progress);
 
               // 状态
               var type = document.getElementById(fileid);
                   type.innerText = progress;
               console.log('progress-----' + progress);
 
               //继续上传
               if (start < file.size && is_stop === 0) {
                   blob = cutFile(file);
                   sendData(blob, file);
                   blob_num += 1;
               }
               //每次清空
               form_data = "";
 
             }else if(data['code'] == 2){
 
               // 进度条
               progress = '100%';
               layui.element.progress(fileid, progress);
 
               // loading end 
               layer.close(loading);
 
               // 上传成功
               var type = document.getElementById(fileid);
                   type.innerText = "上传成功";
               var text = '<span class="filePath" style="display:none">'+data.file_path+'</span><span class="fileExtension" style="display:none">'+data.file_extension+'</span><span class="fileName" style="display:none">'+data.file_name+'</span>';
               $("#filepath").append(text); 
               
               //每次清空
               form_data = "";
 
             }
           },error:function(data){
             // loading end 
             layer.close(loading);
 
             layer.msg('* 未知错误',{icon:2,time:2000});
             return;
           }
         })
     }
 }

  3. php 后台代码，我用的是tp5.0

    • upload.php 封装了一个上传，拼接的方法

        <?php
  	namespace app\admin\controller;
  	use think\Controller;
  	
  	ini_set('memory_limit',-1); //要有足够大的内存来允许处理上传的文件
  	set_time_limit(0); //防止超时
  	
  	class Upload extends Controller
  	{	
  		private $filepath; //上传目录
  		private $tmpPath; //PHP文件临时目录
  		private $blobNum; //第几个文件块
  		private $totalBlobNum; //文件块总数
  		private $fileName; //文件名
  	
  		public function __construct($tmpPath,$blobNum,$totalBlobNum,$fileName,$filepath){
  		    $this->tmpPath = $tmpPath;
  		    $this->blobNum = $blobNum;
  		    $this->totalBlobNum = $totalBlobNum;
  		    $this->fileName = $fileName;
  		    $this->filepath = $filepath;
  		    $this->moveFile();
  		    $this->fileMerge();
  		}
  	
  	  	private function fileMerge(){
  		    if($this->blobNum == $this->totalBlobNum){
  		      // 此处文件不应该拼接，应该是追加入内
  		      // 实测修改后php占用很少的内存也可以实现大文件的上传和拼接操作
  		      for($i=1; $i<= $this->totalBlobNum; $i++){
  		        $blob = '';
  		        $blob = file_get_contents($this->filepath.'/'. $this->fileName.'__'.$i);
  		        file_put_contents($this->filepath.'/'. $this->fileName, $blob, FILE_APPEND );
  		        unset($blob);
  		      }
  		      $this->deleteFileBlob();
  		    }
  		}
  	   
  	  	//删除文件块
  	  	private function deleteFileBlob(){
  		    for($i=1; $i<= $this->totalBlobNum; $i++){
  		      @unlink($this->filepath.'/'. $this->fileName.'__'.$i);
  		    }
  	  	}
  	   
  	 
  	 	private function moveFile(){
  		    $this->touchDir();
  		    $filename = $this->filepath.'/'. $this->fileName.'__'.$this->blobNum;
  		    move_uploaded_file($this->tmpPath,$filename);
  	  	}
  	   
  	  	//API返回数据
  	  	public function apiReturn(){
  		    if($this->blobNum == $this->totalBlobNum){
  		        if(file_exists($this->filepath.'/'. $this->fileName)){
  		          $data['code'] = 2;
  		          $data['msg'] = 'success';
  		          $data['file_path'] = $this->fileName;
  		          $data['file_name'] = substr($this->fileName,0,strrpos($this->fileName, '.'));
  		          $data['file_extension'] = substr(strrchr($this->fileName, '.'), 1);
  		        }
  		    }else{
  		        if(file_exists($this->filepath.'/'. $this->fileName.'__'.$this->blobNum)){
  		          $data['code'] = 1;
  		          $data['msg'] = 'waiting';
  		          $data['file_path'] = '';
  		        }
  		    }
  		    header('Content-type: application/json');
  		    echo json_encode($data);
  	  	}
  	   
  	  
  	  	private function touchDir(){
  		    if(!file_exists($this->filepath)){
  		      return mkdir($this->filepath);
  		    }
  		}
  	  
  	}

  4. 控制器调用上传方法

     // 上传文件
 public function uploadhandle(){
     // 定义存储路径
     $uploadDir = ROOT_PATH . 'public' . DS . 'assets' . DS . 'zip';

     $upload = new Upload($_FILES['file']['tmp_name'],$_POST['blob_num'],$_POST['total_blob_num'],$_POST['file_name'],$uploadDir);
     
     $upload->apiReturn();
 }

最后再强调一下啊，分片上传的文件先上传到一个缓存文件夹，等着合并完之后再保存到要保存的文件夹下，防止上传失败后文件夹里面多了很多小文件，很头痛 ，这样即使失败了也没关系，清一下文件就行#

勤奋小学僧
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
php - 基于 webuploader 视频大文件分片分段上传，支持断点续传（刷新、关闭页面、重新上传、网络中断等情况）带进度条，前端后端都有示例源码详细教程
高级前端工程师
02-20 6530
php大文件(视频)分段上传，php实现大文件上传分片上传断点续传，php 上传视频(分片) ，PHP实现视频文件上传完整实例，如何使用PHP实现同时上传多视频的功能，php分片上传视频，php 视频分片上传，php切片处理视频大文件源代码，php - 视频文件分片问题，PHP实现大文件分割上传与分片上传，用php怎么对视频进行分割，php ffmpeg 视频截取 视频切片，PHP大文件分割上传 PHP分片上传，用php怎么对视频进行分割，php WebUploader 分片上传，PHP使用webuploa
tp3.2 -webuploader较大视频文件分段上传方法.rar
10-31
thinkphp3.2 webuploader较大视频文件分段上传方法demo，大视频分段上传，上传完成后又将分段视频合并成一个视频文件。
thinkphp+H5文件分片（切块）上传
weixin_44124842的博客
06-15 581
应用截图： 前端部分 <!DOCTYPE html><html><head><title>PHP大文件分片上传</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><style type="text/css">#percent-bg{position:relative;width:.
java大文件(百M以上)的上传下载方法
weixin_45525177的博客
09-17 3360
核心原理： 该项目核心就是文件分块上传。前后端要高度配合，需要双方约定好一些数据，才能完成大文件分块，我们在项目中要重点解决的以下问题。 *如何分片； *如何合成一个文件； *中断了从哪个分片开始。 如何分，利用强大的js库，来减轻我们的工作，市场上已经能有关于大文件分块的轮子，虽然程序员的天性曾迫使我重新造轮子。但是因为时间的关系还有工作的关系，我只能罢休了。最后我选择了百度的WebUploader来实现前端所需。 如何合，在合之前，我们还得先解决一个问题，我们如何区分分块所属那个...
PHP(thinkphp6)大文件分片上传到服务器
weixin_44905544的博客
06-03 153
PHP(thinkphp6)大文件分片上传到服务器。
大文件切片上传，支持断点上传
阿坤的博客
12-02 340
最近项目中遇到了大文件上传在IE下经常崩溃，这里我找到一个非常好用的插件分享给大家vue-simple-uploader 读这篇文章之前，建议先读一遍simple-uploader.js的文档 直接上代码 安装 npm install vue-simple-uploader --save 使用：在main.js中： import uploader from 'vue-simple-uploader' Vue.use(uploader) 注册全局组件 html <template> &l
tp5切片上传视频
qioqiao的博客
04-27 2442
vio.html页面（视频上传页）&lt;html&gt;  &lt;head&gt;      &lt;meta charset="UTF-8"&gt;      &lt;link rel="stylesheet" type="text/css" href="/tp5/layer/layer/webuploader.css"&gt;      &lt;li
PHP大文件上传(切片)方法
weixin_52041354的博客
04-05 410
PHP大文件上传(切片)方法，PHP大文件上传(切片)技术，PHP大文件上传(切片)技巧，PHP大文件上传(切片)配置，PHP大文件上传(切片)方案，PHP大文件上传(切片)教程，PHP大文件上传(切片)代码，PHP大文件上传(切片)源代码，PHP大文件上传(切片)源码，PHP大文件上传(分片)解决方案，PHP大文件上传(分块)解决方案，PHP大文件上传(分段)解决方案，PHP大文件上传(加密)解决方案，PHP大文件上传(切片)断点续传，PHP大文件上传下载解决方案，您可以直接复制脚本进行创建。
文件批量上传 tp+layui
02-17
标题“文件批量上传 tp+layui”表明我们要讨论的是一个基于ThinkPHP（简称tp）框架和Layui前端组件库实现的文件批量上传功能。Layui是一个轻量级的前端框架，提供了丰富的UI组件，而ThinkPHP则是一个流行的PHP开发...
layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例
10-18
主要介绍了layui框架实现文件上传及TP3.2.3对上传文件进行后台处理操作,结合实例形式分析了layui框架结合thinkPHP进行文件上传与处理操作相关实现技巧,需要的朋友可以参考下
PHP中TP5 上传文件的实例详解
10-19
主要介绍了PHP中TP5 上传文件的实例详解的相关资料,这里实现PHP 的上传文件的实例，需要的朋友可以参考下
php 大文件分块上传源码，thinkphp，larvavel
12-21
在IT行业中，大文件上传是一项常见的需求，尤其是在处理如视频、图像或大型数据文件时。在PHP环境中，由于默认的文件上传限制，处理大文件可能会遇到挑战。标题提到的"php 大文件分块上传源码，thinkphp，laravel...
plupload分片上传php,Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
weixin_28751115的博客
03-09 271
本文实例讲述了Thinkphp5+plupload实现支持实时预览的图片上传功能。分享给大家供大家参考，具体如下：今天和大家分享一个国外的图片上传插件，这个插件支持分片上传大文件。其中著名的七牛云平台的jssdk就使用了puupload插件，可见这个插件还是相当牛叉的。这个插件不仅仅支持图片上传，还支持大多数文件的上传，例如视频文件，音频文件，word文件等等，而且大文件都采用分片上传的机制。Pl...
tp5+微信小程序 分片上传
weixin_44944193的博客
08-03 883
tp5+微信小程序 分片上传。
PHP TP5 利用ffmpeg进行视频截图
qq_42584121的博客
04-02 711
这里写自定义目录标题PHP利用ffmpeg进行视频截图(Linux)Linux 环境一.安装ffmpeg二.PHP代码 PHP利用ffmpeg进行视频截图(Linux) 最近在做项目的过程中遇到这个业务 , 用户上传的视频需要有一个封面图来展示 , 但是之前没有搞过这个东西 , 所以写完之后来记录一下. 我是用的TP5的框架+PHP7.2的环境 , 第一次用有些参数我还没有仔细看 , 先把功能实现再说 /手动狗头保命 写的不好大家轻点喷我 哈哈 Linux 环境 一.安装ffmpeg 下载地址 http
layui 文件实现分片上传和 断点续传 和 急速秒传 SpringBoot JAVA
这个柠檬有丶酸的博客
12-21 3306
一丶分片上传 分片上传 slice()这个方法功能是将一个文件切割为一系列特定大小的小数据片，分别将这些小数据片分别上传到服务端，全部上传完后再由服务端将这些小数据片合并成为一个完整的资源。 二 丶 断点续传 断点续传需要使用 MD5生成一个文件的唯一码，后台数据库会存下上传记录也就是分片位置和总分片数。 思路就是每次上传之前先拿到MD5的唯一码去数据库查到文件的上传记录以及分片位置和总片数返回给前端从下一个分片开始上传。 三丶 急速秒传 上传之前去拿到MD5唯一码去查数据如果已经有了文件就返回给
layui 多文件大文件切片上传,图片自动压缩
Via_ge的博客
05-15 575
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no viewport-fit=cover"> &...
layui框架实战案例(21)：layui上传的哪些事(layui.upload组件、 file文件域、php后台上传)
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
04-29 7234
使用 upload 模块必须与 upload.render(options) 方法打交道，其中的 options即为基础参数，它是一个对象。
thinkphp5图片或者视频上传
黑白相间...
10-30 3536
thinkphp5图片或者视频上传 public function addgoodspic(){ $data = input('post.'); $data3['goods_id']= $data['goods_id']; if($_FILES){ $file = request()-&amp;gt;file(&quot;image&quot;);...
tp5 layui上传视频
最新发布
07-14
在ThinkPHP5 (TP5) 框架结合Layui库进行文件上传时，处理视频文件通常会稍微复杂一些，因为视频文件通常比图片大得多。以下是使用TP5和Layui进行视频上传的基本步骤： 1. 引入依赖：首先，在项目中引入layui的表单组件和文件上传插件`layui.upload`。 ```html <script src="__STATIC__/layui/layui.js"></script> ``` 2. 配置上传规则：在前端HTML中设置一个表单，配置`layui.upload`的属性，例如设置允许上传的文件类型和最大大小。 ```html <form id="videoForm" lay-filter="uploadVideo"> <input type="hidden" name="token" value="<your-token>"> <input type="file" name="videoFile" lay-choose="layfiles" accept="video/*"> <button type="submit">上传</button> </form> <script> layui.use(['form', 'layer', 'upload'], function () { var form = layui.form(); }); </script> ``` 3. JavaScript处理：在layui.js文件加载完成后，初始化上传函数并监听表单提交事件。 ```javascript layui.upload({ url: '<your-api-url>', // 后端接收视频的URL field: 'videoFile', // 表单字段名 before: async function (obj, file) { /* 在这里添加文件验证和限制 */ if (!file.type.match('video/*')) { layer.msg('只支持上传视频文件'); return false; } // 检查文件大小 if (file.size > 10 * 1024 * 1024) { layer.msg('视频文件过大，请小于10MB'); return false; } }, done: function (res, file) { console.log(res); // 成功回调 // 这里可以将上传结果返回给服务器或显示给用户 } }, '#videoForm') ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值