<!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实现分片上传，断点续传
原文地址：https://www.cnblogs.com/5aiQ/p/9448001.html