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';