大文件上传

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);
}

通往牛逼的路上，在意的只有远方！