理清思路:

引入了两个概念:块(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. python------模块基础【第二部分-time】------

    一.time UTC/GMT:世界时间 本地时间:本地时区时间 python中时间日期格式化符号: %y 两位数的年份表示(00-99) %Y 四位数的年份表示(000-9999) %m 月份(01- ...

  2. C# 使用Emit实现动态AOP框架 进阶篇之异常处理

    目  录 C# 使用Emit实现动态AOP框架 (一) C# 使用Emit实现动态AOP框架 (二) C# 使用Emit实现动态AOP框架 (三) C# 使用Emit实现动态AOP框架 进阶篇之异常处 ...

  3. 【原创】大数据基础之Drill(1)简介、安装及使用

    https://drill.apache.org/ 一 简介 Drill is an Apache open-source SQL query engine for Big Data explorat ...

  4. opencv 模板匹配, 已解决模板过大程序不工作的bug

    #include <opencv2/opencv.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv ...

  5. 分库分布的几件小事(五)MYSQL读写分离

    1.为什么进行读写分离 这个,高并发这个阶段,那肯定是需要做读写分离的,啥意思?因为实际上大部分的互联网公司,一些网站,或者是app,其实都是读多写少.所以针对这个情况,就是写一个主库,但是主库挂多个 ...

  6. jdbc原生操作数据库

    jdbc原生操作数据库流程: 第一步:Class.forName()加载数据库连接驱动: 第二步:DriverManager.getConnection()获取数据连接对象; 第三步:根据 SQL 获 ...

  7. 安装grafna已经grafna对接zabbix

    安装插件 grafana-cli plugins install alexanderzobnin-zabbix-app 重启grafna systemctl restart grafana-serve ...

  8. C++虚函数和纯虚函数的用法和区别

    C++虚函数与纯虚函数用法与区别(转)   1. 虚函数和纯虚函数可以定义在同一个类(class)中,含有纯虚函数的类被称为抽象类(abstract class),而只含有虚函数的类(class)不能 ...

  9. 笔记 前端的$dom操作

    jqueryDOM操作  1.  页面加载  函数 $( function(){ 具体内容 } );        表示页面加载函数   2  dom 类操作 text() - 设置或返回所选元素的文 ...

  10. cubase 的FX轨道使用方法

    FX为辅助通道!