html页面：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <form enctype="multipart/form-data"> <table> <tr> <td>姓名</td> <td> <input type="text" name="uname" class="uname" placeholder="姓名"> </td> </tr> <tr> <td>年龄</td> <td> <input type="text" name="age" class="age" placeholder="年龄"> </td> </tr> <tr> <td>头像</td> <td> <input type="file" name="img" id="img"> </td> </tr> <tr> <td colspan="2"> <input type="button" value="提交" class="sub"> </td> </tr> </table> </form> <script src="jquery-3.3.1.min.js"></script> <script> $(".sub").click(function () { var uname = $(".uname").val(); var age = $(".age").val(); //创建formData对象(用来存储最终提交的数据信息) var fdObj = new FormData(); //获取文件内容 var file = document.getElementById('img').files[0]; //定义一下切割图片的位置参数 var start = 0;//开始位置 var length = 1024*1024;//每次切割的大小 var end = parseInt(start+length); var blob; //存储临时切割后的文件 var blob_num = 1; //给每一个分割后的文件设定一个编号 //执行文件的切割 blob = cutFile(file); //执行文件的发送 sendFile(blob,file); //定义一个切割的方法 function cutFile(file) { var blob_file = file.slice(start,end);//切割出来一张图片 //重新初始化一下开始位置和结束位置 start = end; end = parseInt(start+length); //返回切割后的文件 return blob_file; } //定义一个文件发送的方法 function sendFile(blob,file) { fdObj.append("uname",uname);//表单数据 fdObj.append("age",age);//表单数据 fdObj.append("blob",blob);//临时切割后的文件 fdObj.append("blob_num",blob_num);//切割后的文件编号 fdObj.append("file_name",file.name);//文件名称 fdObj.append("blob_count",Math.ceil(file.size/length));//切片的个数 //ajax向后台发送 $.ajax({ url:"upload.php", type:"post", dataType:"json", data:fdObj, processData:false,//不处理发送的数据 contentType:false,//不处理content-type success:function (data) { console.log(data) } }); //通过判断实现循环上传 if(start<file.size){ //每秒钟上传一次 var t = setTimeout(function () { //切片编号+1 blob_num++; blob = cutFile(file); sendFile(blob,file); },1000) }else{ //清除所有效果 clearTimeout(t); } } }); </script> </body> </html>
php页面：
<?php $data = $_POST; $file = $_FILES; //实现文件上传 $path = './images/'.$data['file_name'].'_'.$data['blob_num']; move_uploaded_file($file['blob']['tmp_name'],$path); //切片的合并 //只有当编号和切片的个数相等的时候，我们才会发起合并的代码 if($data['blob_num']==$data['blob_count']){ //合并 $b = ''; for ($i=1;$i<=$data['blob_count'];$i++){ //读取每一个切片 $b.=file_get_contents('./images/'.$data['file_name'].'_'.$i); } //合并后生成 file_put_contents('./images/'.$data['file_name'],$b); }