php切片上传

由来:在上传文件过程中，如果文件过大第一占用服务器带宽，所以为了减少网络代码，提高用户体验度在客户端【浏览器】首先将资源【图片，资源】使用分页原理将资源切分，然后上传至服务器，最后服务器进行合并，形成图片

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="width: 350px; height: 15px; background-color: #cccccc">
   <div id="per" style="width: 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({width:"100%"});
                          $("#per_num").text(100+"%");
                     }else{
                         chunk++;
                         window.localStorage.setItem(tmpName,chunk);
                         $("#per").css({width: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);

 

posted on 2020-10-21 11:57  孤灯引路人  阅读(465)  评论(0)  编辑  收藏  举报

导航