html5 PHP 分片上传,H5分片上传含前端JS和后端处理（thinkphp）

前端处理input中的file，用slice进行切片上传，这里我使用了url传参，所有就没在formData中增加参数了。onsubbtn(){

let that = this ;

var filecount='',setsize=80000,cutindex='',cutfile='';

var file = $("#baba")["0"].files[0];

filecount = Math.round(file.size/setsize)

console.log(filecount)

for (var i = 0; i < filecount ; i++) {

var formData = new FormData();

cutfile = file.slice(i*setsize,(i+1)*setsize);

formData.append("file", cutfile);

upload(formData,filecount,file.name,i)

}

Toast.loading({

mask: true,

message: '上传中',

duration:0,

});

// console.log(formData)

function upload(data,cut,name,index){

$.ajax({

type:"post",

url:that.ajax+'/videoUpload/1/'+that.defined.userInfo.user+'/'+cut+'/'+name+'/'+index,

data:data,

contentType: false,

processData: false,

success:function(res){

if(res.code == 10014){

that.url = res.data;

Toast.clear();

setTimeout(function(){

if(res.other == 1){

that.zxEditor.addImage(that.ajax + that.url)

}

},600)

}else{

Toast("上传失败")

}

console.log(JSON.stringify(res))

},

error:function(res){

console.log(JSON.stringify(res))

}

})

}

}

后端处理代码(thinkphp)public function Upload($type='0',$user='0',$cut='0',$index='0',$name='0'){

header("Access-Control-Allow-Origin: *");

header('Access-Control-Allow-Credentials: true');

header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE'); // 允许请求的类型\

$file = request()->file('file');

$tmpfile = $_FILES['file']['tmp_name'];

$nameArr = explode(".", $name);

$mad5File = md5($nameArr[0]);

$mad5FileType = $nameArr[1];

$filetype = pathinfo($name, PATHINFO_EXTENSION);

if($file){

if (file_exists(ROOT_PATH.'public/uploads/'. "$user/")) {

}else{

mkdir(ROOT_PATH."public/uploads/" . "$user/", 0700);

}

$cutfile = ROOT_PATH."public/uploads/" . "$user/" . $mad5File.'.'.$mad5FileType.$index;

$filename = ROOT_PATH."public/uploads/" . "$user/" . $mad5File.'.'.$mad5FileType;

move_uploaded_file($tmpfile,$cutfile);

if($index == ($cut-1)){

for ($i=0; $i < $cut; $i++) {

$blob = file_get_contents(ROOT_PATH."public/uploads/" . "$user/" . $mad5File.'.'.$mad5FileType.$i);

file_put_contents(ROOT_PATH."public/uploads/" . "$user/" . $mad5File.'.'.$mad5FileType,$blob, FILE_APPEND | LOCK_EX);

}

for($i=0; $i < $cut; $i++){

@unlink(ROOT_PATH."public/uploads/" . "$user/" . $mad5File.'.'.$mad5FileType.$i);

}

return json(ajax([$filename,$index,$cut],10015,'上传完毕',1));

}

}

return json(ajax([$filename,$index,$cut],10014,'上传中',1));

}

上传时候的请求截图；

上传完成，返回参数中的数组[1~18,18]，这里可以当做是前台呈现上传进度条的参数。

分片上传，会在最后一个分片上传完毕之后，读取之前的分片，并一一写入到新的文件末尾，最后将上传的带有数字后缀的文件删除掉。