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],这里可以当做是前台呈现上传进度条的参数。
分片上传,会在最后一个分片上传完毕之后,读取之前的分片,并一一写入到新的文件末尾,最后将上传的带有数字后缀的文件删除掉。
html5 PHP 分片上传,H5分片上传含前端JS和后端处理(thinkphp)相关推荐
- 分片上传,断点续传,还有秒传
分片上传 为什么需要分片上传 如果文件体积比较大,或者网络条件不好时,上传的时间会比较长(要传输更多的报文,丢包重传的概率也更大),用户不能刷新页面,只能耐心等待请求完成. 分片上传的核心思想 利用H ...
- python分片上传_分片上传_分片上传_上传文件_Python_SDK 示例_对象存储 OSS - 阿里云...
OSS提供的分片上传(Multipart Upload)功能,将要上传的较大文件(Object)分成多个数据块(Part)来分别上传,上传完成后再调用CompleteMultipartUpload接口 ...
- php对接百度网盘开发平台API开发高级实战案例解析:(环境部署、php封装类、Access Token获取、预上传、分片上传)
文章目录 前言 一.环境部署 1.封装BdPan类库 2.回调地址配置 二.获取授权码Code 1.手动获取Code 2.生成本地token 3.读取AccessToken凭证 4.爬虫函数 二.简化 ...
- 前端 + 后端 实现分片上传(断点续传/极速秒传)
先记录下,后面有时间再去实现 可参考链接:vue上传大文件/视频前后端(java)代码 前端 + 后端 实现分片上传(断点续传/极速秒传) 前端slice分片上传,后端用表记录分片索引和分片大小和分片 ...
- 文件上传、分片上传(react)
文件上传(整体上传) 关于上传功能,其实有很多的插件去支持.我这里使用原生的input标签进行上传功能的开发. i n d e x . j s x \color{green}{index.jsx} i ...
- JS 超大文件上传解决方案:分片断点上传(一)
之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...
- 《小白H5成长之路50》js与PHP配合完成图片上传功能
"小白!还记得之前我们说过的jQuery中的ajax异步加载数据的方法么?" "记得,之前的代码我这里还有,你看看是不是这个?" 老朱:"恩,没错,通 ...
- Android WebView 支持H5图片上传input type=file
2019独角兽企业重金招聘Python工程师标准>>> Android WebView 缓存处理 Android WebView 支持H5图片上传<input type=&qu ...
- html5调用手机摄像头,实现拍照上传功能
http://www.glve.net/html5-calls-cell-phone-cameras-to-achieve-photo-upload-feature.html 今天做手机网站,想实现手 ...
最新文章
- 把Redis当作队列来用,真的合适吗?
- 未来到底是什么样子?
- 图像识别中距离变换的原理及作用详解,并附用OpenCV中的distanceTransform实现距离变换的代码
- maya计算机内存不足请保存,Maya内存不足不能渲染怎么优化场景?
- IDEA本地运行Spark项目[演示自定义分区器]并查看HDFS结果文件
- java线程池获取 当前线程池活动的线程数
- 谈谈写程序与学英语 --宋劲杉
- 阿里云发布异构计算产品家族,你可以在上面模拟核爆炸
- 机器学习- 吴恩达Andrew Ng Week9 知识总结 Recommender Systems
- 非标自动化3D选型软件三维SW合集solidworks标准件机械设计电机库
- Hadoop 入门教程(超详细)
- 电脑上怎么看网络丢包/网络延时
- python实现工作流审批_工作流和审批流
- 基于ABP和Magicodes实现Excel导出操作
- python中return0与return1_return 0 和return 1的区别
- micropython移植stm32f746_STM32L476和STM32F746的外部Flash复制文件速度对比
- 爱普搜 | 2021年1月零售汽车销量排名
- mysql的LRU队列详解
- java集合类的线程安全_Java集合中的线程安全问题
- 闲来无事,咱也来看看腾讯,看看UC
热门文章
- 一篇文章彻底搞懂Android事件分发机制
- 网络请求以及网络请求下载图片的工具类 android开发java工具类
- label标签for属性的使用
- 支持多序列化的RPC框架avro-rpc
- 解决VMware Workstation下面Windows Server 2012R2无法安装Hyper-V
- LVS-DR负载均衡-02
- jquery radio/checkbox change 事件不能触发的问题
- 88.http反向代理proxy处理请求的流程
- python ftp 文件修改时间 乐贴_如何使用Python ftplib获取FTP文件的修改时间
- python闭包的应用场景_Python闭包函数定义与用法分析