js實現(xiàn)分割上傳大文件

2019-11-20 10:25:47

字體：大中小

供稿：網(wǎng)友

本文實例介紹了js上傳文件操作，分享給大家供大家參考，具體內(nèi)容如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><title>分割大文件上傳</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style> #test{  width: 200px;  height: 100px;  border: 1px solid green;  display: none; } #img{  width: 50px;  height: 50px;  display: none; } #upimg{  text-align: center;  font: 8px/10px '微軟雅黑','黑體',sans-serif;  width: 300px;  height: 10px;  border: 1px solid green; } #load{  width: 0%;  height: 100%;  background: green;  text-align: center; }</style></head> <body>  <form enctype="multipart/form-data" action="file.php" method="post">   <!--    <input type="file" name="pic" />   <div id="img"></div>   <input type="button" value="uploadimg" onclick="upimg();" /><br />   -->   <div id="upimg">    <div id="load"></div>   </div>   <input type="file" name="mof" multiple="multiple"/>   <input type="button" value="uploadfile" onclick="upfile();" />   <input type="submit" value="submit" />  </form>  <div id="test">   測試是否DIV消失  </div><script type="text/javascript"> var dom=document.getElementsByTagName('form')[0]; dom.onsubmit=function(){  //return false; } var xhr=new XMLHttpRequest(); var fd; var des=document.getElementById('load'); var num=document.getElementById('upimg'); var file; const LENGTH=10*1024*1024; var start; var end; var blob; var pecent; var filename; //var pending; //var clock; function upfile(){  start=0;  end=LENGTH+start;  //pending=false;  file=document.getElementsByName('mof')[0].files[0];  //filename = file.name;  if(!file){   alert('請選擇文件');   return;  }  //clock=setInterval('up()',1000);  up(); } function up(){  /*  if(pending){   return;  }  */  if(start<file.size){   xhr.open('POST','file.php',true);   //xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');   xhr.onreadystatechange=function(){    if(this.readyState==4){     if(this.status>=200&&this.status<300){      if(this.responseText.indexOf('failed') >= 0){       //alert(this.responseText);       alert('文件發(fā)送失敗，請重新發(fā)送');       des.style.width='0%';       //num.innerHTML='';       //clearInterval(clock);      }else{       //alert(this.responseText)       // pending=false;       start=end;       end=start+LENGTH;       setTimeout('up()',1000);      }     }    }   }   xhr.upload.onprogress=function(ev){    if(ev.lengthComputable){     pecent=100*(ev.loaded+start)/file.size;     if(pecent>100){      pecent=100;     }     //num.innerHTML=parseInt(pecent)+'%';     des.style.width=pecent+'%';     des.innerHTML = parseInt(pecent)+'%'    }   }　　　　　　　　　　　　　　//分割文件核心部分slice   blob=file.slice(start,end);   fd=new FormData();   fd.append('mof',blob);   fd.append('test',file.name);   //console.log(fd);   //pending=true;   xhr.send(fd);  }else{   //clearInterval(clock);  } } function change(){  des.style.width='0%'; } </script> </body></html>

file.php:

<?php /**** waited****///print_r($_FILES);exit;$file = $_FILES['mof'];$type = trim(strrchr($_POST['test'], '.'),'.');// print_r($_POST['test']);exit;if($file['error']==0){ if(!file_exists('./upload/upload.'.$type)){  if(!move_uploaded_file($file['tmp_name'],'./upload/upload.'.$type)){   echo 'failed';  } }else{  $content=file_get_contents($file['tmp_name']);  if (!file_put_contents('./upload/upload.'.$type, $content,FILE_APPEND)) {   echo 'failed';  } }}else{ echo 'failed';}?>

1 運行：