理清思路:

引入了两个概念:块(block)和片(chunk)。每个块由一到多个片组成,而一个资源则由一到多个块组成

块是服务端的永久数据存储单位,片则只在分片上传过程中作为临时存储的单位。服务端会以约一个月为单位周期性的清除上传后未被合并为块的数据片

实现过程:

将文件分割,分片上传,然后合并

前端核心code:

var fileForm = document.getElementById("file");

var upstartBtn = document.getElementById('upstart');

var stopBtn = document.getElementById('stop');

var startBtn = document.getElementById('restart');

var rate = document.getElementById('rate');

var divlog = document.getElementById('divlog');

//---------------------------

const LENGTH = 1024 * 1024 * 1;

var start = 0;

var end = start + LENGTH;

var blob;

var blob_num = 1;

var is_stop = 0

var file = null;

var md5filename = '';

//-----------------------------

var upload_instance = new Upload();

fileForm.onchange = function()

{

browserMD5File(fileForm.files[0], function (err, md5) { //如果文件大,md5值生成较慢  md5值生成后才能上传处理,自己优化下吧

md5filename = md5;                                  //如果需要刷新后也能断点,可利用cookie记录,自行完善

divlog.innerHTML = '文件md5为:' + md5filename;

});

}

upstartBtn.onclick = function(){

upload_instance.addFileAndSend(fileForm);

}

stopBtn.onclick = function(){

upload_instance.stop();

}

startBtn.onclick = function(){

upload_instance.start();

}

function Upload(){

var xhr = new XMLHttpRequest();

var form_data = new FormData();

//对外方法,传入文件对象

this.addFileAndSend = function(that){

file = that.files[0];

blob = cutFile(file);

sendFile(blob,file);

blob_num += 1;

}

//停止文件上传

this.stop = function(){

xhr.abort();

is_stop = 1;

}

this.start = function(){

sendFile(blob,file);

is_stop = 0;

}

//切割文件

function cutFile(file){

var file_blob = file.slice(start,end);

start = end;

end = start + LENGTH;

return file_blob;

};

//发送文件

function sendFile(blob,file){

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('md5_file_name',md5filename);

form_data.append('file_name',file.name);

xhr.open('POST','./index.php',false);

xhr.onreadystatechange = function () {

var progress;

var progressObj = document.getElementById('finish');

if(total_blob_num == 1){

progress = '100%';

}else{

progress = (Math.min(100,(blob_num/total_blob_num)* 100 )).toFixed(2) +'%';

}

console.log('progress-----'+progress);

progressObj.style.width = progress;

rate.innerHTML = progress;

var t = setTimeout(function(){

if(start < file.size && is_stop === 0){

blob = cutFile(file);

sendFile(blob,file);

blob_num += 1;

}else{

//setTimeout(t);

}

},1000);

}

xhr.send(form_data);

}

}

后端code

<?php

class Upload{

private $filepath = './upload'; //上传目录

private $tmpPath; //PHP文件临时目录

private $blobNum; //第几个文件块

private $totalBlobNum; //文件块总数

private $fileName; //文件名

private $md5FileName;

public function __construct($tmpPath,$blobNum,$totalBlobNum,$fileName, $md5FileName){

$this->tmpPath = $tmpPath;

$this->blobNum = $blobNum;

$this->totalBlobNum = $totalBlobNum;

$this->fileName = $this->createName($fileName, $md5FileName);

$this->moveFile();

$this->fileMerge();

}

//判断是否是最后一块,如果是则进行文件合成并且删除文件块

private function fileMerge(){

if($this->blobNum == $this->totalBlobNum){

$blob = '';

for($i=1; $i<= $this->totalBlobNum; $i++){

$blob .= file_get_contents($this->filepath.'/'. $this->fileName.'__'.$i);

}

file_put_contents($this->filepath.'/'. $this->fileName,$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'] = 'http://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['DOCUMENT_URI']).str_replace('.','',$this->filepath).'/'. $this->fileName;

}

}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);

}

}

private function createName($fileName, $md5FileName){

return $md5FileName . '.' . pathinfo($fileName)['extension'];

}

}

$upload = new Upload($_FILES['file']['tmp_name'],$_POST['blob_num'],$_POST['total_blob_num'],$_POST['file_name'],$_POST['md5_file_name']);

$upload->apiReturn();

效果展示:

详细配置可参考我写的这篇文章:http://blog.ncmem.com/wordpress/2019/08/12/php%e4%b8%8a%e4%bc%a0%e5%a4%a7%e6%96%87%e4%bb%b6-3/

php上传视频大文件的更多相关文章

  1. php+上传视频大文件

    理清思路: 引入了两个概念:块(block)和片(chunk).每个块由一到多个片组成,而一个资源则由一到多个块组成 块是服务端的永久数据存储单位,片则只在分片上传过程中作为临时存储的单位.服务端会以 ...

  2. 框架基础:ajax设计方案(三)--- 集成ajax上传技术 大文件/超大文件前端切割上传,后端进行重组

    马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...

  3. 前端通信:ajax设计方案(四)--- 集成ajax上传技术 大文件/超大文件前端切割上传,后端进行重组

    马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...

  4. ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法(ajaxfileupload.js第一弹)

    在写这篇的时候本来想把标题直接写成报错的提示,如下: “SecurityError:Blocked a frame with origin "http://localhost:55080&q ...

  5. asp.net 文件上传,大文件上传。

    新建一个asp.net页面,在工具栏里拖入 FileUpload 上传控件.一个按钮 Button  !    !     ! 进入Button事件 //----------------------- ...

  6. ASP.NET 使用ajaxupload.js插件出现上传较大文件失败的解决方法

    在网上下载了一个ajaxupload.js插件,用于无刷新上传图片使的,然后就按照demo的例子去运行了一下,上传啊什么的都OK,但是正好上传的示例图片有一个比较大的,4M,5M的样子,然后上传就会报 ...

  7. NetCore3.0 文件上传与大文件上传的限制

    NetCore文件上传两种方式 NetCore官方给出的两种文件上传方式分别为“缓冲”.“流式”.我简单的说说两种的区别, 1.缓冲:通过模型绑定先把整个文件保存到内存,然后我们通过IFormFile ...

  8. B/S结构下上传下载大文件(1G以上)的解决方案

    以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传  ...

  9. php+html5实现无刷新上传,大文件分片上传,断点续传

    核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...

随机推荐

  1. 【神经网络与深度学习】用训练好的caffemodel来进行分类

    现在我正在利用imagenet进行finetune训练,待训练好模型,下一步就是利用模型进行分类.故转载一些较有效的相关博客. 博客来源:http://www.cnblogs.com/denny402 ...

  2. xc语言l博客作业03

    问题 答案 这个作业属于那个课程 c语言程序设计ll 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-4/homework/8719 我在 ...

  3. git reset –mixed –soft –hard命令解释。

    直接看官方的解释. 其中HEAD代表版本库,index代表暂存区,另外还有一个我们增删改代码的工作区.所以官方解释翻译过来就是: --hard : 回退版本库,暂存区,工作区.(因此我们修改过的代码就 ...

  4. MongoDB和Redis的区别

    1).内存管理机制 a.Redis的数据全部存储在内存当中,会定期写入到磁盘当中,当内存不够用时, 可以选择指定的LRU(最近最少使用算法)的算法删除数据: b.MongoDB数据存在内存,有Linu ...

  5. document与Object的关系

    window与Objet 1. window.__proto__ === Window.prototype 2. window.__proto__.__proto__ === 窗口属性(WindowP ...

  6. 细说vue axios登录请求拦截器

    当我们在做接口请求时,比如判断登录超时时候,通常是接口返回一个特定的错误码,那如果我们每个接口都去判断一个耗时耗力,这个时候我们可以用拦截器去进行统一的http请求拦截. 1.安装配置axios cn ...

  7. Jpa/Hibernate 字节码增强:字段延迟加载

    JPA提供了@Basic注解,实现延迟加载字段的功能,如下: @Basic(fetch = FetchType.LAZY) @Column(name = "REMARK_CONTENT&qu ...

  8. 最大熵与EM算法

    一.熵.联合熵(相当于并集).条件熵.互信息 1.熵是什么? (0)信息量:信息的度量p(xi).信息量和概率成反比,熵是信息量的期望. X是一个随机变量,可能取值有很多个.熵是信息量的期望.熵反应的 ...

  9. python 实现屏幕录制

    用python实现屏幕录制 PIL 即pollow 的安装命令如下: pip install pillow 其中cv2的安装是下面这条命令 pip install opencv-python 代码实现 ...

  10. composer 被墙后镜像设置

    这一步主要更改镜像,不从外网直接取,现在改成了中国的一家镜像站.就是下面这个地址. https://packagist.phpcomposer.com#阿里云的composer镜像源composer ...