"/> xhr2 ">
search

Home >Backend Development >PHP Tutorial >HTML5 solves the problem of resuming upload of large files after breakpoints

HTML5 solves the problem of resuming upload of large files after breakpoints

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-07-28 08:26:561038browse

js code

[html] view plain copy html5解决大文件断点续传 html5解决大文件断点续传

  1. >
  2. <html>
  3. <head>
  4.                                                                                                                                                                                                                                                                                                                     title>
    5. head
  5. > <body> <
  6. div id="drop_area"
  7. style="border: 3px dashed silver;width:200px; height:200px" >
  8. Drag the image here div>                                                                                                        value="0" max
    9. =
  9. "10"
  10. id="prouploadfile">
    11. progress
  11. >
  12. ent">0%span >           <button onclick
    13. =
  13. "stopup()"
  14. id="stop" >Upload button>                                                                                                                                         ​/Drag and drop upload starts                                                                                                                  . " })                                                                                                                                                                            There not worse not No matter more                         in the other’s being’ themselves —    (e){ //Drag and drop                                                                                                    )
  15. document.addeventListener ("Dragenter", function (e) {// Drags
  16. e.preventdeFault ();
  17. })
  18. docume {
  19. var pro
    20. =
  20. document
    21. . getElementById('prouploadfile');                                                       function clearpro(){
  22. pro.value =0;
    23.                                                                                                            
  23. var stopbutton = document.getElementById('stop');
  24.                                                                                            var box
  25. = document.getElementById('drop_area'); //Drag area box.addEventListener("drop",function(e){
  26. var fileList = e.dataTransfer.files; //Get the file object
  27. console.log(fileList)
  28. //Detect whether the file is dragged to the page                                                                                             .length
    29. == 0){                                                                                   到 // Drag the picture to the browser, you can realize the preview function
  29. // Standardized video format
  30. // in_array
  31. Array.prototype.s
  32. = String .fromCharCode(2); ​​ var r
  33. =new RegExp(this.S +e+this.S);                                                    var video_type=["video/mp4","video/ogg"];
  34.                                                                                                                                                                                              var fileurl = window.URL.createObjectURL(fileList[0]);          var str
  35. =">
  36. "; document.getElementById('drop_area ').innerHTML
  37. =str
  38. ; ’s video                                     str
    39. =
  39. "
  40. "; T document.GetelementByid ('Drop_area') .innerhtml
    41. =
  41. str; } else {// Other formats, output file names // alert ("" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" Alert ("" "" " No preview");
  42. var str="File name: "+fileList[0].name;
  43. document.getElementById('drop_area').innerHTML
    44. =
  44. str; }
  45.                                                                                                                                                                                                                                                                                                                                                             = resultfile.size;
  46.                                                                      file                                                             //console.log(filecount)
  47.                                                              ;                                                
    48.                                                                                                                                                                      
  49.                                                                                                                                                                          i):0                                                                                                                                                                                                 . .value=i+1;
  50.                                                                                                        alert (i); =parseInt
  51. (i)*100/Math.ceil(filecount)                                                                                                                                                                                                                                                                                                           ,false);
  53. =
  54. 1;
  55. O if (Stopf == 1) { Return false;
  56. }
  57. if (ResultFile == "") {
  58. Alert ("" Please select a file")
  59.                                                                                                                                                                                                                                                                 
  60. getCookie(resultfile.name);
    61. ​​​​If(Math.floor(filecount)
  61. <parseInt
  62. (i)){
  63. alert("Completed");
  64. return false;                                                                                                           
  65.                                                                                                                                                         var formData = new
  66. FormData(); //++++++++++
  67.                                                                                                                                                                                                                                         i+1;
  69.                                                                                                                                                                                                                                             ? parseInt
    70. (p)+"%";
  71. //Progress bar                                                                                                                                                                                                                                                                                                                                                                                ​                                                                                               resultfile
    72. .slice(i*setsize,filesize);​​​​formData.append('blobname', i); //++++++++++ +
  72.            formData.append('filename', resultfile.name); //++++++++++                                                                                                                     formData.append('filename', resultfile.name);       //++++++++++                                                  xhr.open('POST', 'xhr2.php'); //The second step
  73.                                            ​​​​​​​​stopbutton.innerHTML
  74. = " Pause "
  76.                                                                                                                                                                                      
    77. (){ //Step 4
  78.                                                         == 4 && xhr.status
  79. == 200 ) {
  80.                   console.log(xhr.responseText); If(i<filecount){
    81.                                                                                                                                                                                                                                                                                                        /Set timeout
    82.                                             
  82. xhr.ontimeout = function(event){
    83. Request timed out, network congestion!低于25K/s');  
  83.             　　}           
  84.                   
  85.                 i=i+1;  
  86.                 setCookie(resultfile.name,i,365)  
  87.                   
  88.         }  
  89.           
  90.         //设置cookie  
  91.         function setCookie(c_name,value,expiredays)  
  92.         {  
  93.             var exdate=new Date()  
  94.             exdate.setDate(exdate.getDate()+expiredays)  
  95.             document.cookie=c_name+ "=" +escape(value)+  
  96.             ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()+";path=/")  
  97.         }  
  98.         //获取cookie  
  99.         function getCookie(c_name)  
  100.         {  
  101.         if (document.cookie.length>0)  
  102.           {  
  103.           c_start=document.cookie.indexOf(c_name + "=")  
  104.           if (c_start!=-1)  
  105.             {   
  106.             c_start=c_start + c_name.length+1   
  107.             c_end=document.cookie.indexOf(";",c_start)  
  108.             if (c_end==-1) c_end=document.cookie.length  
  109.             return unescape(document.cookie.substring(c_start,c_end))  
  110.             }   
  111.           }  
  112.         return ""  
  113.         }  
  114.           
  115.           
  116.         function stopup(){  
  117.             if(stop==1){  
  118.                 stop = 0  
  119.                   
  120.                 xhr2();  
  121.             }else{  
  122.                 stop = 1  
  123.                 stopbutton.innerHTML = "继续"  
  124.                   
  125.             }  
  126.               
  127.         }  
  128.         script>  
  129.     body>  
  130. html>  

php代码

[php] view plain copy html5解决大文件断点续传 html5解决大文件断点续传

  2. //$name=$_POST['username'];  
  3. $dir=$_POST['filename'];  
  4. $dir="uploads/".md5($dir);  
  5. file_exists($dir) or mkdir($dir,0777,true);  
  6.   
  7.   
  8. $path=$dir."/".$_POST['blobname'];  
  9.   
  10.   
  11. //print_r($_FILES["file"]);  
  12. move_uploaded_file($_FILES["file"]["tmp_name"],$path);  
  13.   
  14. if(isset($_POST['lastone'])){  
  15.     echo $_POST['lastone'];  
  16.     $count=$_POST['lastone'];  
  17.       
  18.     $fp   = fopen($_POST['filename'],"abw");  
  19.     for($i=0;$i<=$count;$i++){  
  20.         $handle = fopen($dir."/".$i,"rb");    
  21.         fwrite($fp,fread($handle,filesize($dir."/".$i)));    
  22.         fclose($handle);      
  23.     }  
  24.     fclose($fp);  
  25. }  
  26.       
  27.       
  28. ?> 

以上就介绍了 html5解决大文件断点续传，包括了方面的内容，希望对PHP教程有兴趣的朋友有所帮助。

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of spl_autoload_register functionNext article：Detailed explanation of spl_autoload_register function

Related articles

See more