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 
 2     
 3         
 4     
54 
55 
60 
61 
62     
63     
64         
ajax大文件切割上传
65         
66         

67         

68             

69         
70         

71         

72         

73         
74 
75     
76 
77                 

 

php文件代码：

 

 1 

 

 

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

 

 

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

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

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

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

clock = window.setInterval(selectfile,1000);

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

 

html文件代码：

 

 1 
 2     
 3         
 4     
71 
72 
77 
78 
79     
80     
81         
ajax大文件切割上传
82         
83         

84         

85             

86         
87         

88         

89         

90         
91 
92     
93 

 

 

 

php文件代码：

 

 1