由来:在上传文件过程中，如果文件过大第一占用服务器带宽，所以为了减少网络代码，提高用户体验度在客户端【浏览器】首先将资源【图片，资源】使用分页原理将资源切分，然后上传至服务器，最后服务器进行合并，形成图片
1.前端代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./jquery.js"></script> </head> <body> <div id="per_box" style=" 350px; height: 15px; background-color: #cccccc"> <div id="per" style=" 0%; height: 100%; background-color: #007CD5"></div> <span id="per_num"></span> </div> <br /> <input type="file" name="file_tag" id="file_tag"> <input type="button" value="上传" id = "upload_btn"> </body> </html> <script> $(document).ready(function(){ $("#upload_btn").click(function(){ var files = $("#file_tag")[0].files[0]; if(!files){ $("#file_tag").trigger("click"); } var chunk;//当前页面数值 upload(files); }); function upload(file){ var tmpName = file.size+"_chunk"; var every_size=1024*1024;//每一页传递的数据 var chunks = Math.ceil(file.size /every_size);//一共多少页 chunk = window.localStorage.getItem(tmpName) || 1; chunk = parseInt(chunk); var offset = (chunk-1) * every_size;//开始位置 var limit = chunk * every_size > file.size ? file.size : chunk * every_size; var page = file.slice(offset,limit);//获取一页的数据 var form = new FormData();//这是一个表单的对象 form.append("page",page);//类似于一个input框 form.append("filename",file.name);//文件名字 var per = (limit/file.size * 100).toFixed(1); $.ajax({ type : "post", data:form, processData : false,//取消服务器对上传文件线程控制 contentType : false,//取消服务器设置上传文件的类型 cache : false,//不需要服务器设置缓存 dataType : 'json', url : "/upload.php", success:function(msg){ if(chunk >= chunks ){ $("#per").css({"100%"}); $("#per_num").text(100+"%"); }else{ chunk++; window.localStorage.setItem(tmpName,chunk); $("#per").css({per+"%"}); $("#per_num").text(per+"%"); upload(file); } } }); } }); </script>
2.后端代码
$baseFileName = $_REQUEST['filename']; $ext = explode(".",$baseFileName)[1]; $fileName=explode(".",$baseFileName)[0]; $arr = $_FILES['page']; $tmpName = $arr['tmp_name']; $content = file_get_contents($tmpName); $fileName = "./{$fileName}.{$ext}"; file_put_contents($fileName,$content,FILE_APPEND); $arr = array( 'error'=>0, ); echo json_encode($arr);