Ajax实现大文件切割上传

Ajax大文件切割上传

2015-02-07

前面我们已经实现了Ajax的文件上传，不过会受限于服务器的允许的大小，

如果服务器并非自己的，我们就要使用Ajax大文件切割来实现上传。

首先解决Ajax跨域上传问题：

在HTML5中，ajax的跨域有了新的规则-----能否跨域取决于对应的应答。

对方服务器如果愿意接受远程过来的ajax，或某几个域名过来的ajax请求，可以在头信息header中，加入Access-Control-Allow-Origin *

在PHP中加入此信息，就可以实现跨域请求。

一、简陋的文件时上传思路

截取用到的API

file->继承自->Blob

Blob有slice方法，可以截取二进制对象的一部分

思路：截取10M，上传

判断文件有没有截取完毕

while 还有数据{

截取

上传

}

html文件代码：

 1 <html>
 2     <head>
 3     <title>FormData</title>    
 4     <script type="text/javascript">
 5 */
 6     /*用到的API
 7      file->继承自->Blob
 8      Blob有slice方法，可以截取二进制对象的一部分
 9      思路：截取10M，上传
10      判断文件有没有截取完毕
11      while 还有数据{
12          截取
13         上传
14      }
15          
16      */
17 function selectfile(){
18     const LENGTH = 10 * 1024 * 1024; //每次截取的长度
19     var sta = 0;        //从零处开始截取
20     var end = sta +LENGTH; 
21     var blob = null;
22     var fd = null;
23     var xhr = null;
24     var percent = 0;
25 
26     /* blob对象 */
27     var mov = document.getElementsByTagName('input')[0].files[0];
28     var totalsize = mov.size;
29 
30     
31     while(sta < totalsize){
32         blob = mov.slice(sta,end);
33         fd = new FormData(); //定义一个FormData数组    
34         fd.append('part',blob);//格式化
35         
36         xhr = new XMLHttpRequest();
37     　　//post发送
38     　　xhr.open('POST','HTML5upJinDuTiao_DaWenJianShangchuan.php',false);    
39 
40         xhr.onreadystatechange = function(){
41             if(this.readyState == 4){
42                 document.getElementById('debug').innerHTML = this.responseText;
43             }
44         }    
45         console.log(blob);            
46 
47         xhr.send(fd);
48         sta = end;
49         end +=LENGTH;    
50     }
51 }
52 
53     </script>
54 
55 <style type='text/css'>
56     img{ width:500px; }
57     #progress{width:500px; height:15px; border:1px solid green;}
58     #bar{width:0%; height:100%; background:green;}
59 </style>
60 
61 
62     </head>
63     <body>
64         <h1>ajax大文件切割上传</h1>
65         <input type="file" name="pic" onchange="selectfile();" />
66         <hr/>
67         <div id="progress">
68             <div id="bar"></div>
69         </div>
70         <div id="debug2"></div>
71         <hr/>
72         <div id="debug"></div>
73         
74 
75     </body>
76 </html>
77

php文件代码：

 1 <?php
 2 
 3 /*接收文件并合并*/
 4 
 5 print_r($_FILES);
 6 
 7 if(!file_exists('./upload/up.mp4')){
 8     move_uploaded_file($_FILES['part']['tmp_name'],'./upload/up.mp4');
 9 }else{
10     file_put_contents('./upload/up.mp4',file_get_contents('./upload/up.mp4').file_get_contents($_FILES['part']['tmp_name']));
11 }
12 
13 echo 'ok';
14 
15 ?>

这个是一个简陋的大文件切割上传程序，如果想看进度，或者查看其是否再上传，我们必须按下F12，在控制台中看，文件没切割一次，相应的信息就会在控制台中显示一行。

二、改进（增加上传进度条）

由于浏览器对页面渲染的优化，如果要增加上传进度条显示的话，经过浏览器的渲染优化，我们的进度条在上传是不会增加，而是在上传完毕后，直接从0增加对100，这个是无法忍受的。

原因是：浏览器渲染的优化，reflow，具体可以网上找相应的详细资料。

为了增加进度条效果，我们可以使用window的定时器，

clock = window.setInterval(selectfile,1000);

让它每秒钟刷新一下页面，计算当前上传进度，显示出来。

html文件代码：

 1 <html>
 2     <head>
 3     <title>FormData</title>    
 4     <script type="text/javascript">
 5 
 6     /*用到的API
 7      file->继承自->Blob
 8      Blob有slice方法，可以截取二进制对象的一部分
 9      思路：截取10M，上传
10      判断文件有没有截取完毕
11      利用定时器不断的调用
12      */
13 xhr = new XMLHttpRequest();
14 var clock = null;
15 
16 //file选择，触发定时器函数
17 function selectfile_fire(){
18     clock = window.setInterval(selectfile,1000);
19     //定时1s
20 }
21 
22 //闭包函数
23 var selectfile = (function(){
24      const LENGTH = 10*1024*1024;//每次截取的长度
25     var sta = 0;                //从零处开始截取
26     var end = sta +LENGTH;
27     var flag = false;    //表示上一块是否发送完毕
28     var blob = null;
29     var fd = null;
30     var percent = 0;
31 
32         //匿名函数
33     return(function (){
34         alert("aa");
35         if(flag == true){　　　　//是否正在上传
36             return;
37         }
38         flag = true;
39         var mov = document.getElementsByTagName('input')[0].files[0];/* blob对象 */
40         
41         fd = new FormData();
42         blob = mov.slice(sta,end);
43         fd.append('part',blob);
44         up(fd);
45 
46         //如果sta > mov.size 就结束
47         if(sta >= mov.size){
48             clearInterval(clock);    //清除定时
49             return ;
50         }
51         sta = end;
52         end = sta + LENGTH;
53         flag = false;    //上传完毕
54         
55         percent = 100 * end /mov.size ;
56         percent = percent >= 100 ? 100 : percent;
57         document.getElementById('bar').style.width = percent + "%";
58         document.getElementById('bar').innerHTML =  parseInt(percent) + "%"  ;
59 
60     });
61 })();
62 
63 /*利用定时器不断调用*/
64 function  up(fd){
65     xhr.open('POST','HTML5upJinDuTiao_DaWenJianShangchuan.php',false);    //post发送
66     xhr.send(fd);
67 }
68 
69 
70     </script>
71 
72 <style type='text/css'>
73     img{ width:500px; }
74     #progress{width:500px; height:15px; border:1px solid green;}
75     #bar{width:0%; height:100%; background:green;}
76 </style>
77 
78 
79     </head>
80     <body>
81         <h1>ajax大文件切割上传</h1>
82         <input type="file" name="pic" onchange="selectfile_fire();" />
83         <hr/>
84         <div id="progress">
85             <div id="bar"></div>
86         </div>
87         <div id="debug2"></div>
88         <hr/>
89         <div id="debug"></div>
90         
91 
92     </body>
93 </html>

php文件代码：

 1 <?php
 2 
 3 /*接收文件并合并*/
 4 
 5 print_r($_FILES);
 6 
 7 if(!file_exists('./upload/up.mp4')){
 8     move_uploaded_file($_FILES['part']['tmp_name'],'./upload/up.mp4');
 9 }else{
10     file_put_contents('./upload/up.mp4',file_get_contents('./upload/up.mp4').file_get_contents($_FILES['part']['tmp_name']));
11 }
12 
13 echo 'ok';
14 
15 ?>

posted on 2015-02-07 15:19 Lover雪儿阅读(1126) 评论(0) 编辑收藏举报