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>
77php文件代码：
1
这个是一个简陋的大文件切割上传程序，如果想看进度，或者查看其是否再上传，我们必须按下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
