cari

Rumah >hujung hadapan web >tutorial js >js melaksanakan muat naik berpecah bagi kemahiran files_javascript yang besar

js melaksanakan muat naik berpecah bagi kemahiran files_javascript yang besar

WBOY
WBOYasal
2016-05-16 15:11:321783semak imbas

Contoh dalam artikel ini memperkenalkan operasi muat naik fail js dan dikongsi dengan semua orang untuk rujukan anda Kandungan khusus adalah seperti berikut

<!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('文件发送失败，请重新发送');
       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>

fail.php:

<&#63;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';
}

&#63;>

1 Larian:

2 Pilih ujian fail 2G:

3 Selesai dan bermain seperti biasa:

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Memahami kemahiran javascript regular expressions_javascriptArtikel seterusnya：Memahami kemahiran javascript regular expressions_javascript

Artikel berkaitan

Lihat lagi