1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
  3. <head>
  4. <title>分割大文件上传</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <style>
  7.     #test{
  8.         width: 200px;
  9.         height: 100px;
  10.         border: 1px solid green;
  11.         display: none;
  12.     }
  13.     #img{
  14.         width: 50px;
  15.         height: 50px;
  16.         display: none;
  17.     }
  18.     #upimg{
  19.         text-align: center;
  20.         font: 8px/10px '微软雅黑','黑体',sans-serif;
  21.         width: 300px;
  22.         height: 10px;
  23.         border: 1px solid green;
  24.     }
  25.     #load{
  26.         width: 0%;
  27.         height: 100%;
  28.         background: green;
  29.         text-align: center;
  30.     }
  31. </style>
  32. </head>
  33.     <body>
  34.         <form enctype="multipart/form-data" action="file.php" method="post">
  35.             <!--
  36.             <input type="file" name="pic" />
  37.             <div id="img"></div>
  38.             <input type="button" value="uploadimg" onclick="upimg();" /><br />
  39.             -->
  40.             <div id="upimg">
  41.                 <div id="load"></div>
  42.             </div>
  43.             <input type="file" name="mof" multiple="multiple"/>
  44.             <input type="button" value="uploadfile" onclick="upfile();" />
  45.             <input type="submit" value="submit" />
  46.         </form>
  47.         <div id="test">
  48.             测试是否DIV消失
  49.         </div>
  50. <script type="text/javascript">
  51.     var dom=document.getElementsByTagName('form')[0];
  52.     dom.onsubmit=function(){
  53.         //return false;
  54.     }
  55.     var xhr=new XMLHttpRequest();
  56.     var fd;
  57.     var des=document.getElementById('load');
  58.     var num=document.getElementById('upimg');
  59.     var file;
  60.     const LENGTH=10*1024*1024;
  61.     var start;
  62.     var end;
  63.     var blob;
  64.     var pecent;
  65.     var filename;
  66.     //var pending;
  67.     //var clock;
  68.     function upfile(){
  69.         start=0;
  70.         end=LENGTH+start;
  71.         //pending=false;
  72.  
  73.         file=document.getElementsByName('mof')[0].files[0];
  74.         //filename = file.name;
  75.         if(!file){
  76.             alert('请选择文件');
  77.             return;
  78.         }
  79.         //clock=setInterval('up()',1000);
  80.         up();
  81.  
  82.     }
  83.  
  84.     function up(){
  85.         /*
  86.         if(pending){
  87.             return;
  88.         }
  89.         */
  90.         if(start<file.size){
  91.             xhr.open('POST','file.php',true);
  92.             //xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  93.             xhr.onreadystatechange=function(){
  94.                 if(this.readyState==4){
  95.                     if(this.status>=200&&this.status<300){
  96.                         if(this.responseText.indexOf('failed') >= 0){
  97.                             //alert(this.responseText);
  98.                             alert('文件发送失败，请重新发送');
  99.                             des.style.width='0%';
  100.                             //num.innerHTML='';
  101.                             //clearInterval(clock);
  102.                         }else{
  103.                             //alert(this.responseText)
  104.                             // pending=false;
  105.                             start=end;
  106.                             end=start+LENGTH;
  107.                             setTimeout('up()',1000);
  108.                         }
  109.  
  110.                     }
  111.                 }
  112.             }
  113.             xhr.upload.onprogress=function(ev){
  114.                 if(ev.lengthComputable){
  115.                     pecent=100*(ev.loaded+start)/file.size;
  116.                     if(pecent>100){
  117.                         pecent=100;
  118.                     }
  119.                     //num.innerHTML=parseInt(pecent)+'%';
  120.                     des.style.width=pecent+'%';
  121.                     des.innerHTML = parseInt(pecent)+'%'
  122.                 }
  123.             }
    　　　　　　　
    　　　　　　　//分割文件核心部分slice
  124.             blob=file.slice(start,end);
  125.             fd=new FormData();
  126.             fd.append('mof',blob);
  127.             fd.append('test',file.name);
  128.             //console.log(fd);
  129.             //pending=true;
  130.             xhr.send(fd);
  131.         }else{
  132.             //clearInterval(clock);
  133.         }
  134.     }
  135.  
  136.     function change(){
  137.         des.style.width='0%';
  138.     }
  139.  
  140. </script>
  141.     </body>
  142. </html>

file.php:

  1. <?php
  2. /****
  3.     waited
  4. ****/
  5. //print_r($_FILES);exit;
  6.  
  7. $file = $_FILES['mof'];
  8.  
  9. $type = trim(strrchr($_POST['test'], '.'),'.');
  10.  
  11. // print_r($_POST['test']);exit;
  12.  
  13. if($file['error']==0){
  14.     if(!file_exists('./upload/upload.'.$type)){
  15.         if(!move_uploaded_file($file['tmp_name'],'./upload/upload.'.$type)){
  16.             echo 'failed';
  17.         }
  18.     }else{
  19.         $content=file_get_contents($file['tmp_name']);
  20.         if (!file_put_contents('./upload/upload.'.$type, $content,FILE_APPEND)) {
  21.             echo 'failed';
  22.         }
  23.     }
  24. }else{
  25.     echo 'failed';
  26. }
  27.  
  28. ?>

1 运行：

2 选择2G文件测试:

3 完成并正常播放:

js大文件分割上传的更多相关文章

  1. PHP + JS 实现大文件分割上传

    服务器上传文件会有一定的限制.避免内存消耗过大影响性能,在 php.ini 配置文件中,有几个影响参数: upload_max_filesize = 2M //PHP最大能接受的文件大小 post_m ...

  2. Html5 突破微信限制实现大文件分割上传

    先来前端代码 <!DOCTYPE html> <html> <head> <meta name="viewport" content=&q ...

  3. formdata方式上传文件，支持大文件分割上传

    1.upload.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <h ...

  4. js大文件分块上传断点续传demo

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

  5. nodeJs + js 大文件分片上传

    简单的文件上传 一.准备文件上传的条件: 1.安装nodejs环境 2.安装vue环境 3.验证环境是否安装成功 二.实现上传步骤 1.前端部分使用 vue-cli 脚手架,搭建一个 demo 版本, ...

  6. android下大文件分割上传

    由于android自身的原因,对大文件(如影视频文件)的操作很容易造成OOM,即:Dalvik堆内存溢出,利用文件分割将大文件分割为小文件可以解决问题. 文件分割后分多次请求服务. //文件分割上传 ...

  7. PHP大文件分割上传（分片上传）

    服务端为什么不能直接传大文件?跟php.ini里面的几个配置有关 upload_max_filesize = 2M //PHP最大能接受的文件大小 post_max_size = 8M //PHP能收 ...

  8. PHP实现大文件分割上传与分片上传

    转载:http://www.zixuephp.com/phpstudy/phpshilie/20170829_43029.html 服务端为什么不能直接传大文件?跟php.ini里面的几个配置有关 u ...

  9. PHP大文件分片上传的实现方法

    一.前言 在网站开发中,经常会有上传文件的需求,有的文件size太大直接上传,经常会导致上传过程中耗时太久,大量占用带宽资源,因此有了分片上传. 分片上传主要是前端将一个较大的文件分成等分的几片,标识 ...

随机推荐

  1. git设置过滤忽略的文件或文件夹

    我们一般向代码仓库提交项目的时候,一般需要忽略编译生成的中间文件以及文件夹的提交,因为它们是无用的,而且也会占用仓库的空间.一般只用提交.pro,.sln,makefile,程序源文件等编译必须用到的 ...

  2. SRM 601 DIV1

    A 枚举x , 然后对于确定的x , 最后总的apple数对应了唯一的orange数,因此问题转化为求apple的取值范围; apple的取值范围: max为每个bag取最多的apple , min为 ...

  3. zabbix discovery

    preface(见面礼): 仅扫tcp端口: netstat -tnlp|egrep -i "$1"

  4. HDFS文件系统的操作

    package com.bank.utils; import java.io.BufferedInputStream;import java.io.BufferedOutputStream;impor ...

  5. linux部署mongodb及基本操作

    原文:http://blog.csdn.net/jinzhencs/article/details/50930877 一.安装部署mongo 1.创建文件夹 /opt/mongodb/single / ...

  6. SQL Server 系统时间

    getdate()函数:取得系统当前的日期和时间.返回值为datetime类型的. 用法:getdate() 例子: select getdate() as dte,dateadd(day,-1,ge ...

  7. SecureCRT7.3和SecureFX7.3的MAC下破解

    破解脚本:http://files.cnblogs.com/files/jieyuefeng/SecureCRTFX_mac_crack.zip 破解方法: sudo perl ~/Downloads ...

  8. SEO_Alexa排名

    1.Alexa排名是评价某一网站访问量的一个指标,对SEO优化没有任何作用,这个数据是可以做假的,考虑Alexa排名纯粹是在浪费时间. 2.Alexa排名是针对已经在浏览器中安装了Alexa Tool ...

  9. DedeCMS官方手册

    DedeCMSV5.3使用手册 DedeCMSV57数据库结构文档 Dedecms 文件目录结构

  10. Wamp集成环境配置多站点

    一.打开apache配置文件httpd.conf 二.修改httpd.conf配置文件 1.在配置文件httpd.conf中搜索 conf/extra/httpd-vhosts.conf,然后将该行代 ...