php+ajax实现文件切割上传功能示例
这篇文章主要介绍了php+ajax实现文件切割上传功能,结合实例形式分析了PHP结合HTML5 File对象的slice函数进行文件切割与ajax无刷新上传相关操作技巧,需要的朋友可以参考下。
本文实例讲述了php+ajax实现文件切割上传功能，分享给大家供大家参考，具体如下：
html5中的File对象继承Blob二进制对象，Blob提供了一个slice函数，可以用来切割文件数据。
- <!DOCTYPE HTML>
- <html >
- <head>
- <meta charset="UTF-8">
- <title></title>
- </head>
- <body>
- <form method="post" >
- <input type="file" name="file" />
- <input type="submit" name="submit" value="提交" />
- </form>
- <div ></div>
- </body>
- <script type="text/javascript">
- var myForm = document.getElementById("myForm");
- var upfile = document.getElementById("upfile");
- myForm.onsubmit = function() {
- //获取文件对象
- var file = upfile.files[0];
- //获取文件大小
- var fileSize = file.size;
- //一次截取的大小(字节)
- var CutSize = 1024 * 1024 * 10;
- //开始截取位置
- var CutStart = 0;
- //结束截取位置
- var CutEnd = CutStart + CutSize;
- //截取的临时文件
- var tmpfile = new Blob();
- while(CutStart < fileSize) {
- tmpfile = file.slice(CutStart, CutEnd);
- //我们创建一个FormData对象
- var fd = new FormData();
- //把文件添加到FormData对象中
- fd.append("file", tmpfile);
- var xhr = new XMLHttpRequest();
- //这里使用同步
- xhr.open("post", "upfile.php", false);
- //上传进度
- console.log(Math.round( (CutStart + tmpfile.size) / fileSize * 100) + "%");
- //发送FormData对象
- xhr.send(fd);
- //重新设置截取文件位置
- CutStart = CutEnd;
- CutEnd = CutStart + CutSize;
- }
- return false;
- };
- </script>
- </html>
upfile.php代码如下：
- <?php
- $uploadDir = './upload/';
- if(!file_exists($uploadDir)) {
- @mkdir($uploadDir, 0777, true);
- }
- $uploadFile = $uploadDir . basename($_FILES['file']['name']);
- if(!file_exists($uploadFile)) {
- //如果文件不存在
- move_uploaded_file($_FILES['file']['tmp_name'], $uploadFile);
- } else {
- //如果文件已存在，追加数据
- file_put_contents($uploadFile, file_get_contents($_FILES['file']['tmp_name']), FILE_APPEND);
- }