理清思路:

引入了两个概念:块(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. php通过session来实现登录验证

    1.概述 这几天在做一个内部统计管理系统,所有内容需要登录后才能查看.这就需要系统内部每个模块都有登录验证的功能.在网上找了一圈资料,决定用session来做. 2.系统概况 后端语言:php(用的是 ...

  2. Python开发之IDE选择

    Python开发之IDE 一.为什么用IDE 到现在为止,谁还不是个写过代码的人啦,但你有没有发现,每次写代码要新建文件.写完保存时还要选择存放地点,执行时还要切换到命令行调用python解释器,好麻 ...

  3. 搞懂Dubbo SPI可拓展机制

    前言 阅读本文需要具备java spi的基础,本文不讲java spi,please google it. 一.Dubbo SPI 简介 SPI(Service Provider Interface) ...

  4. ASP.NET_正则表达式_匹配HTML中的一行或多行

    一.匹配数字串/flash/([0-9]+).htm 二.匹配不含双引号的字符串<p class=\"w490\">([^\"]+)</p> 三. ...

  5. JS基础_while循环

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. Mongoose 使用Node操作MongoDB

    Mongoose好处 可以为文档创建一个模式结构(Schema) 可以对模型中的对象/文档进行验证 数据可以通过类型转换转换为对象模型 可以使用中间件来应用业务逻辑挂钩 比Node原生的MongoDB ...

  7. java enum类自定义属性

    enum类自定义属性 这就是enum比static静态变量好用的地方了,可以赋予每一个枚举值若干个属性,例如 实例1: public enum GasStationChannel { ZH(" ...

  8. ubuntu - 14.04,安装Git(源代码管理工具)

    在shell中执行:sudo apt-get install git-core

  9. Golang新开发者要注意的陷阱和常见错误

    转自:http://colobu.com/2015/09/07/gotchas-and-common-mistakes-in-go-golang/ 目录 [−] 初级 开大括号不能放在单独的一行 未使 ...

  10. tensorboardX使用中 AttributeError: 'function' object has no attribute 'graph'

    最近在使用tensorboardX可视化网络结构,因为tensorboardX并非pytorch原生的可视化工具,所以版本之间并不兼容 在使用的过程中会遇到,AttributeError: 'func ...