Ajax大文件切割上传

浏览数：186 / 时间：2015年06月09日

1问：在不更改php.ini中post_max_size的情况下怎么实现大文件的上？

　　答把大文件切割成许多小块，分块上传，传完后，重新合并成大文件即可。

2问：怎么切割？

　　答：用html5中的file API,这个API继承自Blob对象，Blob中有slice方法，可以截取二进制对象的一部分，实现切割大文件的效果。

3问：具体思路呢？

　　答：截取10M上传，判断是否截取完毕

while 还有数据{
      截取，
     Ajax上传            
}

 1 <script type="text/javascript">
 2 unction sendfile() {
 3     const LENGTH = 10 * 1024 * 1024;
 4     var sta = 0;
 5     var end = sta + LENGTH;
 6     var blob = null;
 7     var fd = null;
 8 
 9     /*
10         xhr 对象
11     */
12     var xhr = null;
13 
14     var mov = document.getElementsByName(‘mov‘)[0].files[0];
15     //console.log(mov);return;
16     
17     var totalsize = mov.size;
18     var percent = 0;
19 
20     while(sta < totalsize) {
21         blob = mov.slice(sta,end);
22         fd = new FormData();
23         fd.append(‘part‘,blob);
24 
25         xhr = new XMLHttpRequest();
26         xhr.open(‘POST‘,‘06-sliceup.php‘,false);
27 
28         xhr.send(fd);
29 
30         sta = end;
31         end = sta + LENGTH; 
32 
33         percent = 100 * end / totalsize;
34         if(percent > 100) {
35             percent = 100;
36         }
37         document.getElementById(‘bar‘).style.width = percent + ‘%‘;
38         document.getElementById(‘bar‘).innerHTML = parseInt(percent) + ‘%‘;
39     }
40 
41 }
42 
43 
44 </script>

html页面

</head>
    <body>
        <h1>html5大文件切割上传</h1>
        <div id="progress">
            <div id="bar"></div>
        </div>
        <input type="file" name="mov" onchange="sendfile();" />
    </body>
</html>

后台要有个php页面，把文件接收并合并起来

1 if(!file_exists(‘./upload/hhr.mov‘)) {
2     move_uploaded_file($_FILES[‘part‘][‘tmp_name‘],‘./upload/hhr.mov‘);
3 } else {
4     file_put_contents(‘./upload/hhr.mov‘,file_get_contents($_FILES[‘part‘][‘tmp_name‘]),FILE_APPEND);
5 }
6 
7 echo ‘ok‘;