js分割文件快速上传

<?php header('Content-type:text/html;charset=UTF-8'); ?>

<?php
if ($_FILES) {
  
  if(!file_exists('./uploads/123.zip')) {
    move_uploaded_file($_FILES['part']['tmp_name'],'./uploads/123.zip');
  } else {
    file_put_contents('./uploads/123.zip',file_get_contents($_FILES['part']['tmp_name']),FILE_APPEND);
    unlink($_FILES['part']['tmp_name']);
  }

  echo 'ok';
  exit;
}
?>

<h1>html5大文件切割上传</h1>
<div id="bar" style="">
    <span id="progress">0%</span>
</div>

<input name="mov" type="file" />
<input id="btn" type="button" value="点我" />

<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#btn').click(function() {
            sendfile();
        });
    })

     function sendfile() {
         const LENGTH = 1024 * 1024;
         var sta = 0;
         var end = sta + LENGTH;
         var blob = null;
         var fd = null;

         /*
             xhr 对象
         */
         var xhr = null;

         var mov = document.getElementsByName('mov')[0].files[0];
         //console.log(mov);return;

         var totalsize = mov.size;
         var percent = 0;

         // while(sta < totalsize) {
         timer = setInterval(function(){
            if (sta>totalsize) {
                clearInterval(timer);
            };
            blob = mov.slice(sta,end);
             fd = new FormData();
             fd.append('part',blob);

             xhr = new XMLHttpRequest();
             xhr.open('POST',"",false);

             xhr.send(fd);

             sta = end;
             end = sta + LENGTH; 

             percent = 100 * end / totalsize;
             if(percent > 100) {
                 percent = 100;
             }
             // document.getElementById('bar').style.width = percent + '%';
            // $('#bar').width(percent+'%');
             $('#bar').css({'width':percent+'%', 'background-color':'red'});
             $('#progress').html(parseInt(percent)+'%');
         },1)

         // }

     }


</script>

  

posted @ 2015-08-18 15:32  Adtuu  阅读(1695)  评论(0编辑  收藏  举报