前端处理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)相关推荐

  1. 分片上传,断点续传,还有秒传

    分片上传 为什么需要分片上传 如果文件体积比较大,或者网络条件不好时,上传的时间会比较长(要传输更多的报文,丢包重传的概率也更大),用户不能刷新页面,只能耐心等待请求完成. 分片上传的核心思想 利用H ...

  2. python分片上传_分片上传_分片上传_上传文件_Python_SDK 示例_对象存储 OSS - 阿里云...

    OSS提供的分片上传(Multipart Upload)功能,将要上传的较大文件(Object)分成多个数据块(Part)来分别上传,上传完成后再调用CompleteMultipartUpload接口 ...

  3. php对接百度网盘开发平台API开发高级实战案例解析:(环境部署、php封装类、Access Token获取、预上传、分片上传)

    文章目录 前言 一.环境部署 1.封装BdPan类库 2.回调地址配置 二.获取授权码Code 1.手动获取Code 2.生成本地token 3.读取AccessToken凭证 4.爬虫函数 二.简化 ...

  4. 前端 + 后端 实现分片上传(断点续传/极速秒传)

    先记录下,后面有时间再去实现 可参考链接:vue上传大文件/视频前后端(java)代码 前端 + 后端 实现分片上传(断点续传/极速秒传) 前端slice分片上传,后端用表记录分片索引和分片大小和分片 ...

  5. 文件上传、分片上传(react)

    文件上传(整体上传) 关于上传功能,其实有很多的插件去支持.我这里使用原生的input标签进行上传功能的开发. i n d e x . j s x \color{green}{index.jsx} i ...

  6. JS 超大文件上传解决方案:分片断点上传(一)

    之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...

  7. 《小白H5成长之路50》js与PHP配合完成图片上传功能

    "小白!还记得之前我们说过的jQuery中的ajax异步加载数据的方法么?" "记得,之前的代码我这里还有,你看看是不是这个?" 老朱:"恩,没错,通 ...

  8. Android WebView 支持H5图片上传input type=file

    2019独角兽企业重金招聘Python工程师标准>>> Android WebView 缓存处理 Android WebView 支持H5图片上传<input type=&qu ...

  9. html5调用手机摄像头,实现拍照上传功能

    http://www.glve.net/html5-calls-cell-phone-cameras-to-achieve-photo-upload-feature.html 今天做手机网站,想实现手 ...

最新文章

  1. 把Redis当作队列来用,真的合适吗?
  2. 未来到底是什么样子?
  3. 图像识别中距离变换的原理及作用详解,并附用OpenCV中的distanceTransform实现距离变换的代码
  4. maya计算机内存不足请保存,Maya内存不足不能渲染怎么优化场景?
  5. IDEA本地运行Spark项目[演示自定义分区器]并查看HDFS结果文件
  6. java线程池获取 当前线程池活动的线程数
  7. 谈谈写程序与学英语 --宋劲杉
  8. 阿里云发布异构计算产品家族,你可以在上面模拟核爆炸
  9. 机器学习- 吴恩达Andrew Ng Week9 知识总结 Recommender Systems
  10. 非标自动化3D选型软件三维SW合集solidworks标准件机械设计电机库
  11. Hadoop 入门教程(超详细)
  12. 电脑上怎么看网络丢包/网络延时
  13. python实现工作流审批_工作流和审批流
  14. 基于ABP和Magicodes实现Excel导出操作
  15. python中return0与return1_return 0 和return 1的区别
  16. micropython移植stm32f746_STM32L476和STM32F746的外部Flash复制文件速度对比
  17. 爱普搜 | 2021年1月零售汽车销量排名
  18. mysql的LRU队列详解
  19. java集合类的线程安全_Java集合中的线程安全问题
  20. 闲来无事,咱也来看看腾讯,看看UC

热门文章

  1. 一篇文章彻底搞懂Android事件分发机制
  2. 网络请求以及网络请求下载图片的工具类 android开发java工具类
  3. label标签for属性的使用
  4. 支持多序列化的RPC框架avro-rpc
  5. 解决VMware Workstation下面Windows Server 2012R2无法安装Hyper-V
  6. LVS-DR负载均衡-02
  7. jquery radio/checkbox change 事件不能触发的问题
  8. 88.http反向代理proxy处理请求的流程
  9. python ftp 文件修改时间 乐贴_如何使用Python ftplib获取FTP文件的修改时间
  10. python闭包的应用场景_Python闭包函数定义与用法分析