php+ajax large file fragment upload sample code

code idea

When PHP uploads very large files, you can’t just let the backend php upload , and it will easily lose half of the benefits of internal testing. The front end needs to cooperate with the back end to process together, and the file upload should use the AJAX method instead of the submit method of the form.

The front end divides the file object into files of a certain size according to a certain size (such as 2M or 5M), and uploads the divided files to the backend one by one. After the backend receives the fragmented files, the They are first placed in a temporary directory. When the data request completed by the front end is received, the files in the temporary directory are assembled into a new file. After saving, delete the files in the temporary directory.

sample code

HTML code:

<div class="a">
    上传<input id="myfile" type="file" name="myfile"/>
</div>

Here to explain, do not use submit to upload, use ajax to upload.

JS code :

<script>
$(function(){
let myfile = document.getElementById("myfile");
myfile.onchange = function(){
let file = myfile.files[0]; // 这里可以得到上传的文件对象
let length = 1024 * 1024 * 5; // 这里是每一个分片的大小
let total_number = Math.ceil(file.size/length); // 使用进一法，来确定分片的个数
let start = 0; // 分片的初始位置
let end = length; // 分片的结束位置
let parr = []; // 这里为promise.all方法准备一个数组
for(let i = 1;i<=total_number;i++){
// 这里开始分片，并且把每一个分片上传到服务器
let bolb = file.slice(start,end); // 得到一个分片
start = end; // 调整下一个分片的起始位置
end = start+length; // 调整下一个分片的结束位置
if(end > file.size){
end=file.size; // 这里对最后的一个分片结束位置进行调整
}
let formdata = new FormData(); // 创建一个FormData对象，准备传送数据
formdata.append("file",blob); // 将分片数据放入formdata
formdata.append("tempfilename",i+"_"+file.name); // 同时为这个分片设置一个名称，其中的i帮助后端进行排序处理
// formdata组装好之后，调用pro()函数，返回一个promise对象，并把它放入parr数组中，方便后面的promise.all方法使用
parr.push(pro(formadata));
}
// 以上for循环结束之后，parr数组中就全部是分片上传的promise的对象了，此时我们使用promise.all方法，等待所有上传都成功执行后，再向服务器发送一个请求，也就是上传完成，让服务器组装分片的请求
Promise.all(parr).then(res=>{
if(res.length == parr.length){ // 如果返回成功的数组长度和parr的数组长度相等，说明分片全部上传成功
// 此时对上传接口再次发送请求，同时把上传的文件名带上，方便后台查找要组装的分片文件名，因为是请求同一个上传接口，所以我们还要传一个flag=1表示这是一个数据组装的请求
                    $.ajax({
                        type:"post",
                        url:"http://xxx.com/index/upload/getupload",
                        data:{flag:1,filename:file.name}, // 这里flag=1表示上传完成，请求组装，filename表示要组成哪一组文件分片
                        success:function(res){
                            if(res.length == parr.length){
                                console.log(111);
                            }
                        },
                        fail: function () {
                            reject()
                        }
                    })
}
})
}
})
// 这个函数用来上传分片文件，返回的是一个promise对象，方便后面使用promise.all还判断所有分片是否是上传成功的
// 这里要说明一下，$.post()是不可以上传文件的，只能用$.ajax()并且要把contentType:false和processData:false带上
    function pro(formData){
        return new Promise((resolve,reject)=>{
            $.ajax({
                type:"post",
                url:"http://xxx.com/index/upload/getupload", // 后台上传文件的地址
                data:formData,
                contentType: false, // 这个不能少，ajax上传文件是不能少的
                processData: false, // 这个不能少，ajax上传文件必传false
                success:function(res){
                    resolve(res)
                },
                fail: function () {
                    reject()
                }
            })
        })
    }
</script>

The above is the core part of the front-end js, and the comments can basically be understood.

php code :

<?php
// tp5框架
public function getUpload(){
$tempdir = APP_PATH."../public/tempdir"; // 这里分片的文件指定了一个临时目录，后面会用到
$flag = input("flag",0); // 接收参数flag如果没有这个参数就默认为0，如果flag=1，表示要组装分片
if($flag == 0){
// 这里是上传分片
$file = request()->file("file"); // 接收到这个分片
$tempfilename = input("tempfilename"); // 接收到这个分片的名称，注意：这个名称中含有排序信息
if(!file_exists($tempdir)){
mkdir($tempdir,0755,true); // 如果临时目录不存在，则创建一个临时目录
}
$fileinfo = $file->move($tempdir,$tmpfilename);
if($fileinfo){ // 把分片的文件保存在了临时目录中，返回有点简单，可以根据需求返回相应的数据
return josn(['error'=>0]);
}else{
return json(['error'=>1]);
}
}elseif($flag == 1){
// 如果flag为1表示，分片已上传完成了
$filename = input("filename");
// 通过文件名的字符串匹配，找上所有的分片，返回一个文件路径的数组
$fileArr = glob($tempdir."/*".$filename);
// 这里的*是一个通配符，将所有的文件名中包含的$filename的文件都找到
// 说明一下，$fileArr中的数组的顺序不是我们想要的，所以我们新建一个数组来整理一下顺序
$newfileArr = [];
foreach($fileArr as $f){
    // js前端把文件的名称前加了'序号+_'，以下划线来分开并把序号写在key中
$fileBaseName = basename($f); // $f是一个个的路径，这里使用basename得到文件名
$fileBaseNameSplit = explode("_", $fileBaseName); // 通过下划线分割文件名
$newfileArr[$fileBaseNameSplit[0]] = $f; // 构造了一个新的数组，其中数组的key就是顺序号，数组的值就是分片文件的路径
}
// 分片的序号和路径都准备好了，就可以组装了
$num = count($newfileArr); // 得到的所有分片的个数，为后面使用for循环做准备
// 开始使用for循环来组装
$newfilename = "new-".$filename; // 这里为组装后的文件起一个名字
for($i=1; $i<=$num; $i++){
            // 这里以追加的方式，把分片文件都写入到了一个文件中
            file_put_contents($newfilename,file_get_contents($newfileArr[$i]),FILE_APPEND);
        }
// ......
// 删除临时文件中的分片文件，这里可以使用try catch来判断是否有错误
foreach($newfileArr as $fi){
unlink($fi);
}
// 最后给前端返回保存的文件名就可以
}
}

The above method, I uploaded a 650M file locally, and it only took 20 seconds. I haven’t tested it on the server. You can try this method.