PHP加JS实现分片上传，断点续传
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>xhr2</title>
</head>
<body>
<div id="drop_area" style="border:3px dashed silver;width:200px; height:200px">
将图片拖拽到此
</div> <progress value="0" max="10" id="prouploadfile"></progress> <span id="persent">0%</span>
<br />
<!--<button onclick="xhr2()">ajax上传</button>-->
<button onclick="stopup()" id="stop">上传</button>
<script>
//拖拽上传开始
//-1.禁止浏览器打开文件行为
document.addEventListener("drop",function(e){ //拖离
e.preventDefault();
})
document.addEventListener("dragleave",function(e){ //拖后放
e.preventDefault();
})
document.addEventListener("dragenter",function(e){ //拖进
e.preventDefault();
})
document.addEventListener("dragover",function(e){ //拖来拖去
e.preventDefault();
})
//上传进度
var pro = document.getElementById('prouploadfile');
var persent = document.getElementById('persent');
function clearpro(){
pro.value=0;
persent.innerHTML="0%";
} //2.拖拽
var stopbutton = document.getElementById('stop'); var resultfile=""
var box = document.getElementById('drop_area'); //拖拽区域
box.addEventListener("drop",function(e){
var fileList = e.dataTransfer.files; //获取文件对象
console.log(fileList)
//检测是否是拖拽文件到页面的操作
if(fileList.length == 0){
return false;
}
//拖拉图片到浏览器，可以实现预览功能
//规定视频格式
//in_array
Array.prototype.S=String.fromCharCode(2);
Array.prototype.in_array=function(e){
var r=new RegExp(this.S+e+this.S);
return (r.test(this.S+this.join(this.S)+this.S));
};
var video_type=["video/mp4","video/ogg"]; //创建一个url连接,供src属性引用
var fileurl = window.URL.createObjectURL(fileList[0]);
if(fileList[0].type.indexOf('image') === 0){ //如果是图片
var str="<img width='200px' height='200px' src='"+fileurl+"'>";
document.getElementById('drop_area').innerHTML=str;
}else if(video_type.in_array(fileList[0].type)){ //如果是规定格式内的视频
var str="<video width='200px' height='200px' controls='controls' src='"+fileurl+"'></video>";
document.getElementById('drop_area').innerHTML=str;
}else{ //其他格式，输出文件名
//alert("不预览");
var str="文件名字:"+fileList[0].name;
document.getElementById('drop_area').innerHTML=str;
}
resultfile = fileList[0];
console.log(resultfile); //切片计算
filesize= resultfile.size;
setsize=500*1024;
filecount = filesize/setsize;
//console.log(filecount)
//定义进度条
pro.max=parseInt(Math.ceil(filecount)); i =getCookie(resultfile.name);
i = (i!=null && i!="")?parseInt(i):0 if(Math.floor(filecount)<i){
alert("已经完成");
pro.value=i+1;
persent.innerHTML="100%"; }else{
alert(i);
pro.value=i;
p=parseInt(i)*100/Math.ceil(filecount)
persent.innerHTML=parseInt(p)+"%";
} },false); //3.ajax上传 var stop=1;
function xhr2(){
if(stop==1){
return false;
}
if(resultfile==""){
alert("请选择文件")
return false;
}
i=getCookie(resultfile.name);
console.log(i)
i = (i!=null && i!="")?parseInt(i):0 if(Math.floor(filecount)<parseInt(i)){
alert("已经完成");
return false;
}else{
//alert(i)
}
var xhr = new XMLHttpRequest();//第一步
//新建一个FormData对象
var formData = new FormData(); //++++++++++
//追加文件数据 //改变进度条
pro.value=i+1;
p=parseInt(i+1)*100/Math.ceil(filecount)
persent.innerHTML=parseInt(p)+"%";
//进度条 if((filesize-i*setsize)>setsize){
blobfile= resultfile.slice(i*setsize,(i+1)*setsize);
}else{
blobfile= resultfile.slice(i*setsize,filesize);
formData.append('lastone', Math.floor(filecount));
}
formData.append('file', blobfile);
//return false;
formData.append('blobname', i); //++++++++++
formData.append('filename', resultfile.name); //++++++++++
//post方式
xhr.open('POST', 'xhr2.php'); //第二步骤
//发送请求
xhr.send(formData); //第三步骤
stopbutton.innerHTML = "暂停"
//ajax返回
xhr.onreadystatechange = function(){ //第四步
if ( xhr.readyState == 4 && xhr.status == 200 ) {
console.log( xhr.responseText );
if(i<filecount){
xhr2();
}else{
i=0;
}
}
};
//设置超时时间
xhr.timeout = 20000;
xhr.ontimeout = function(event){
alert('请求超时，网络拥堵！低于25K/s');
} i=i+1;
setCookie(resultfile.name,i,365) } //设置cookie
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString()+";path=/")
}
//获取cookie
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
} function stopup(){
if(stop==1){
stop = 0 xhr2();
}else{
stop = 1
stopbutton.innerHTML = "继续" } }
</script>
</body>
</html>
<?php
//$name=$_POST['username'];
$dir=$_POST['filename'];
$dir="uploads/".md5($dir);
file_exists($dir) or mkdir($dir,0777,true); $path=$dir."/".$_POST['blobname']; //print_r($_FILES["file"]);
move_uploaded_file($_FILES["file"]["tmp_name"],$path); if(isset($_POST['lastone'])){
echo $_POST['lastone'];
$count=$_POST['lastone']; $fp = fopen($_POST['filename'],"abw");
for($i=0;$i<=$count;$i++){
$handle = fopen($dir."/".$i,"rb");
fwrite($fp,fread($handle,filesize($dir."/".$i)));
fclose($handle);
}
fclose($fp);
}
?>
PHP加JS实现分片上传，断点续传的更多相关文章
- 打造 html5 文件上传组件，实现进度显示及拖拽上传，支持秒传+分片上传+断点续传，兼容IE6+及其它标准浏览器
老早就注册了博客园帐号,昨天才发现,连博客都没开,Github也是一样,深觉惭愧,赶紧潜个水压压惊`(*∩_∩*)′ 言归正传.大概许多人都会用到文件上传的功能,上传的库貌似也不少,比如(jQuery ...
- php实现大文件上传分片上传断点续传
前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小 小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长, ...
- JS大文件上传断点续传解决方案
1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...
- js实现大文件上传分片上传断点续传
文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...
- b/s实现大文件上传分片上传断点续传
关键部分 前端用file.slice()分块 前端用FileReader获取每一分块的md5值 后端用MultipartFile接受分块文件 后端用FileOutputStream拼装分块文件 话不多 ...
- web实现大文件上传分片上传断点续传
需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...
- java实现大文件上传分片上传断点续传
我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 这次项目的需求: 支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,i ...
- java文件分片上传,断点续传
文件夹数据库处理逻辑 publicclass DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject(); ...
- jsp实现大文件上传分片上传断点续传
1,项目调研 因为需要研究下断点上传的问题.找了很久终于找到一个比较好的项目. 在GoogleCode上面,代码弄下来超级不方便,还是配置hosts才好,把代码重新上传到了github上面. http ...
随机推荐
- c#自带压缩类实现的多文件压缩和解压
用c#自带的System.IO.Compression命名空间下的压缩类实现的多文件压缩和解压功能,缺点是多文件压缩包的解压只能调用自身的解压方法,和现有的压缩软件不兼容.下面的代码没有把多文件的目录 ...
- 参考 ZTree 加载大数据量。加载慢问题解析
参考 ZTree 加载大数据量. 1.一次性加载大数据量加载说明 1).zTree v3.x 针对大数据量一次性加载进行了更深入的优化,实现了延迟加载功能,即不展开的节点不创建子节点的 DOM. 2) ...
- STL 萃取(Traits)机制剖析
模板特化 在将萃取机制之前,先要说明模板特化 当有两个模板类,一个是通用泛型模板,一个是特殊类型模板,如果创建一个特殊类型的对象,会优先调用特殊的类型模板类,例如: template <type ...
- Go之第三方库ini
文章转自 快速开始 my.ini # possible values : production, development app_mode = development [paths] # Path t ...
- （转）Java中的String与常量池
Java中的String与常量池 转自:http://developer.51cto.com/art/201106/266454.htm string是java中的字符串.String类是不可变的,对 ...
- java基础(六)之继承初探
什么是继承? 一个类得到了另一个类当中的成员变量和成员方法.java只支持单继承.一个子类只允许继承一个父类,一个父类可以被多个子类继承. 比如下面的一个例子, 先创建一个Person类 class ...
- php preg正则表达式的组成部分
定界符号 : 多种都可以,常用为// 原子 : 最小的一个匹配单位 (放在定界符中),在一个正则表达式中,至少要有一个原子 1,打印字符(a-z A-Z 0-9 ~!@#$%^&*()_+.. ...
- Python基础知识详解 从入门到精通（七）类与对象
本篇主要是介绍python,内容可先看目录其他基础知识详解,欢迎查看本人的其他文章Python基础知识详解 从入门到精通(一)介绍Python基础知识详解 从入门到精通(二)基础Python基础知识详 ...
- 最详细的linux安装php过程
本文主要和大家分享最详细的linux安装php过程,然后写好了nginx的安装配置,后面就是php的安装和mysql的安装,不过时间有限,而且放篇里也太长,所以都是分开来写,php安装完毕后就是mys ...
- Docker Compose 使用示例
一般步骤 1.定义Dockerfile,方便迁移到任何地方: 2.编写docker-compose.yml文件: 3.运行docker-compose up启动服务 示例 准备工作:提前下载好镜像: ...