php大文件切片上传_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);

全站搜索

php大文件切片上传

最新推荐

本周排行