首页 > 代码库 > Ajax大文件切割上传

Ajax大文件切割上传

2024-08-03 01:02:41   221人阅读

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

 

Ajax大文件切割上传


联系
我们