1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8"/>
  5.         <title>xhr2</title>
  6.     </head>
  7.     <body>
  8.         <div  id="drop_area" style="border:3px dashed silver;width:200px; height:200px">
  9.             将图片拖拽到此
  10.         </div>  
  11.  
  12.         <progress value="0" max="10" id="prouploadfile"></progress>  
  13.  
  14.         <span id="persent">0%</span>
  15.         <br />
  16.         <!--<button onclick="xhr2()">ajax上传</button>-->
  17.         <button onclick="stopup()" id="stop">上传</button>
  18.         <script>
  19.         //拖拽上传开始
  20.         //-1.禁止浏览器打开文件行为
  21.         document.addEventListener("drop",function(e){  //拖离
  22.             e.preventDefault();
  23.         })
  24.         document.addEventListener("dragleave",function(e){  //拖后放
  25.             e.preventDefault();
  26.         })
  27.         document.addEventListener("dragenter",function(e){  //拖进
  28.             e.preventDefault();
  29.         })
  30.         document.addEventListener("dragover",function(e){  //拖来拖去
  31.             e.preventDefault();
  32.         })
  33.         //上传进度
  34.         var pro = document.getElementById('prouploadfile');
  35.         var persent = document.getElementById('persent');
  36.         function clearpro(){
  37.             pro.value=0;
  38.             persent.innerHTML="0%";
  39.         }  
  40.  
  41.         //2.拖拽
  42.         var stopbutton = document.getElementById('stop');  
  43.  
  44.         var resultfile=""
  45.         var box = document.getElementById('drop_area'); //拖拽区域
  46.         box.addEventListener("drop",function(e){
  47.             var fileList = e.dataTransfer.files; //获取文件对象
  48.             console.log(fileList)
  49.             //检测是否是拖拽文件到页面的操作
  50.             if(fileList.length == 0){
  51.                 return false;
  52.             }
  53.             //拖拉图片到浏览器，可以实现预览功能
  54.             //规定视频格式
  55.             //in_array
  56.             Array.prototype.S=String.fromCharCode(2);
  57.             Array.prototype.in_array=function(e){
  58.                 var r=new RegExp(this.S+e+this.S);
  59.                 return (r.test(this.S+this.join(this.S)+this.S));
  60.             };
  61.             var video_type=["video/mp4","video/ogg"];  
  62.  
  63.             //创建一个url连接,供src属性引用
  64.             var fileurl = window.URL.createObjectURL(fileList[0]);
  65.             if(fileList[0].type.indexOf('image') === 0){  //如果是图片
  66.                 var str="<img width='200px' height='200px' src='"+fileurl+"'>";
  67.                 document.getElementById('drop_area').innerHTML=str;
  68.             }else if(video_type.in_array(fileList[0].type)){   //如果是规定格式内的视频
  69.                 var str="<video width='200px' height='200px' controls='controls' src='"+fileurl+"'></video>";
  70.                 document.getElementById('drop_area').innerHTML=str;
  71.             }else{ //其他格式，输出文件名
  72.                 //alert("不预览");
  73.                 var str="文件名字:"+fileList[0].name;
  74.                 document.getElementById('drop_area').innerHTML=str;
  75.             }
  76.             resultfile = fileList[0];
  77.             console.log(resultfile);      
  78.  
  79.             //切片计算
  80.             filesize= resultfile.size;
  81.             setsize=500*1024;
  82.             filecount = filesize/setsize;
  83.             //console.log(filecount)
  84.             //定义进度条
  85.             pro.max=parseInt(Math.ceil(filecount));   
  86.  
  87.             i =getCookie(resultfile.name);
  88.             i = (i!=null && i!="")?parseInt(i):0  
  89.  
  90.             if(Math.floor(filecount)<i){
  91.                 alert("已经完成");
  92.                 pro.value=i+1;
  93.                 persent.innerHTML="100%";  
  94.  
  95.             }else{
  96.                 alert(i);
  97.                 pro.value=i;
  98.                 p=parseInt(i)*100/Math.ceil(filecount)
  99.                 persent.innerHTML=parseInt(p)+"%";
  100.             }  
  101.  
  102.         },false);    
  103.  
  104.         //3.ajax上传  
  105.  
  106.         var stop=1;
  107.         function xhr2(){
  108.             if(stop==1){
  109.                 return false;
  110.             }
  111.             if(resultfile==""){
  112.                 alert("请选择文件")
  113.                 return false;
  114.             }
  115.             i=getCookie(resultfile.name);
  116.             console.log(i)
  117.             i = (i!=null && i!="")?parseInt(i):0  
  118.  
  119.             if(Math.floor(filecount)<parseInt(i)){
  120.                 alert("已经完成");
  121.                 return false;
  122.             }else{
  123.                 //alert(i)
  124.             }
  125.             var xhr = new XMLHttpRequest();//第一步
  126.             //新建一个FormData对象
  127.             var formData = new FormData(); //++++++++++
  128.             //追加文件数据  
  129.  
  130.             //改变进度条
  131.             pro.value=i+1;
  132.             p=parseInt(i+1)*100/Math.ceil(filecount)
  133.             persent.innerHTML=parseInt(p)+"%";
  134.             //进度条  
  135.  
  136.             if((filesize-i*setsize)>setsize){
  137.                 blobfile= resultfile.slice(i*setsize,(i+1)*setsize);
  138.             }else{
  139.                 blobfile= resultfile.slice(i*setsize,filesize);
  140.                 formData.append('lastone', Math.floor(filecount));
  141.             }
  142.                 formData.append('file', blobfile);
  143.                 //return false;
  144.                 formData.append('blobname', i); //++++++++++
  145.     　　      formData.append('filename', resultfile.name); //++++++++++
  146.                 //post方式
  147.                 xhr.open('POST', 'xhr2.php'); //第二步骤
  148.                 //发送请求
  149.                 xhr.send(formData);  //第三步骤
  150.                 stopbutton.innerHTML = "暂停"
  151.                 //ajax返回
  152.                 xhr.onreadystatechange = function(){ //第四步
  153.             　　　　if ( xhr.readyState == 4 && xhr.status == 200 ) {
  154.             　　　　　　console.log( xhr.responseText );
  155.                         if(i<filecount){
  156.                             xhr2();
  157.                         }else{
  158.                             i=0;
  159.                         }
  160.             　　　　}
  161.             　　};
  162.                 //设置超时时间
  163.                 xhr.timeout = 20000;
  164.                 xhr.ontimeout = function(event){
  165.             　　　　alert('请求超时，网络拥堵！低于25K/s');
  166.             　　}           
  167.  
  168.                 i=i+1;
  169.                 setCookie(resultfile.name,i,365)  
  170.  
  171.         }  
  172.  
  173.         //设置cookie
  174.         function setCookie(c_name,value,expiredays)
  175.         {
  176.             var exdate=new Date()
  177.             exdate.setDate(exdate.getDate()+expiredays)
  178.             document.cookie=c_name+ "=" +escape(value)+
  179.             ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()+";path=/")
  180.         }
  181.         //获取cookie
  182.         function getCookie(c_name)
  183.         {
  184.         if (document.cookie.length>0)
  185.           {
  186.           c_start=document.cookie.indexOf(c_name + "=")
  187.           if (c_start!=-1)
  188.             {
  189.             c_start=c_start + c_name.length+1
  190.             c_end=document.cookie.indexOf(";",c_start)
  191.             if (c_end==-1) c_end=document.cookie.length
  192.             return unescape(document.cookie.substring(c_start,c_end))
  193.             }
  194.           }
  195.         return ""
  196.         }  
  197.  
  198.         function stopup(){
  199.             if(stop==1){
  200.                 stop = 0  
  201.  
  202.                 xhr2();
  203.             }else{
  204.                 stop = 1
  205.                 stopbutton.innerHTML = "继续"  
  206.  
  207.             }  
  208.  
  209.         }
  210.         </script>
  211.     </body>
  212. </html>
  1. <?php
  2. //$name=$_POST['username'];
  3. $dir=$_POST['filename'];
  4. $dir="uploads/".md5($dir);
  5. file_exists($dir) or mkdir($dir,0777,true);  
  6.  
  7. $path=$dir."/".$_POST['blobname'];  
  8.  
  9. //print_r($_FILES["file"]);
  10. move_uploaded_file($_FILES["file"]["tmp_name"],$path);  
  11.  
  12. if(isset($_POST['lastone'])){
  13.     echo $_POST['lastone'];
  14.     $count=$_POST['lastone'];  
  15.  
  16.     $fp   = fopen($_POST['filename'],"abw");
  17.     for($i=0;$i<=$count;$i++){
  18.         $handle = fopen($dir."/".$i,"rb");
  19.         fwrite($fp,fread($handle,filesize($dir."/".$i)));
  20.         fclose($handle);
  21.     }
  22.     fclose($fp);
  23. }
  24. ?>

PHP加JS实现分片上传，断点续传的更多相关文章

  1. 打造 html5 文件上传组件，实现进度显示及拖拽上传，支持秒传+分片上传+断点续传，兼容IE6+及其它标准浏览器

    老早就注册了博客园帐号,昨天才发现,连博客都没开,Github也是一样,深觉惭愧,赶紧潜个水压压惊`(*∩_∩*)′ 言归正传.大概许多人都会用到文件上传的功能,上传的库貌似也不少,比如(jQuery ...

  2. php实现大文件上传分片上传断点续传

    前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小 小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长, ...

  3. JS大文件上传断点续传解决方案

    1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...

  4. js实现大文件上传分片上传断点续传

    文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...

  5. b/s实现大文件上传分片上传断点续传

    关键部分 前端用file.slice()分块 前端用FileReader获取每一分块的md5值 后端用MultipartFile接受分块文件 后端用FileOutputStream拼装分块文件 话不多 ...

  6. web实现大文件上传分片上传断点续传

    需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在500M内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以501M来进行限制. 第一步: 前端修改 由于项目使用的是 ...

  7. java实现大文件上传分片上传断点续传

    我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 这次项目的需求: 支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,i ...

  8. java文件分片上传,断点续传

    文件夹数据库处理逻辑 publicclass DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject(); ...

  9. jsp实现大文件上传分片上传断点续传

    1,项目调研 因为需要研究下断点上传的问题.找了很久终于找到一个比较好的项目. 在GoogleCode上面,代码弄下来超级不方便,还是配置hosts才好,把代码重新上传到了github上面. http ...

随机推荐

  1. Runtime.getRuntime.exec()执行linux脚本导致程序卡死有关问题

    Runtime.getRuntime.exec()执行linux脚本导致程序卡死问题问题: 在Java程序中,通过Runtime.getRuntime().exec()执行一个Linux脚本导致程序被 ...

  2. 一看就会一做就废系列：说说 RECOVER DATABASE（上）

    这里是:一看就会,一做就废系列 数据库演示版本为 19.3 (12.2.0.3) 该系列涉及恢复过程中使用的 个语句: 1. recover database 2. recover database ...

  3. 关于真机测试root权限问题

    普通用户好像也无伤大雅: 输入后看到这样的有个美元符号,说明你的虚拟机获取不了权限,有权限的应该是root和#都有,这个时候你输入su 如果还是没有变化,看看你的虚拟机是不是android7.0,An ...

  4. 关于testbench

    区别与verilog HDL代码,主要留意以下内容: 1,语言本身支持的特征和可综合的代码是两回事,不是所有verilog语言都可以转化为硬件的. 2,testbench作为top module,不需 ...

  5. [git] git合并冲突 本地已有项目上传 各种问题

    git... 讲道理 我现在能隐约感觉到他的强大控制能力了 但是依旧是不习惯.... 无论是什么操作 在我这里都会出问题,,,, 上传本地已有的项目到码云 首先需要现在码云创建一个仓库 然后用git工 ...

  6. linux软件下载

    可以到linux官网下载:http://vault.centos.org/6.10/os/Source/SPackages/

  7. Iris_MVC

    2. MVC包使用 在Iris框架中,封装了mvc包作为对mvc架构的支持,方便开发者遵循mvc的开发原则进行开发. iris框架支持请求数据.模型.持久数据分层处理,并支持各层级模块代码绑定执行. ...

  8. Python多线程join/setDaemon

    import threading, time class Test(): def test1(self): print("--") time.sleep(3) print(&quo ...

  9. 【C语言】已知三角形三边长，求三角形面积

    一. 数学基础: 已知三角形的三边,计算三角形面积,需要用到海伦公式: 即p=(a+b+c)/2 二. 算法: 输入三个边长,套用海伦公式计算面积,并输出. 可以先判断是否可以构成三角形,即任意两边之 ...

  10. Navicat Preminm for Linx

    1. 准备工作 首先你要有能在Windows下安装破解Navicat Preminm的能力 去"官网"下载你所需要的"Navicat Preminm for Linx&q ...