• 大文件上传


    //  JS页面

    $("#but").click(function () {
        //创建formdata对象
        var fd=new FormData();
        //获取文件
        var file=document.getElementById("img").files[0];
      //  console.log(file);
        //配置大文件上传需要的参数
        var start=0;//开始
        var size=1024*1024;//大小
        var end=parseInt(start+size);//结束
        var blob;//定义一个小切片,用来表示每一个小切片
        var blob_num=1;//给每一个小切片定义一个编号
         blob=CutFile(file)//拿到被分割的小切片
         blob=sendFile(file);
        //执行文件分割
        function CutFile(file) {
            var blob=file.slice(start,end);//分割出来的其中一个小切片
            start=end;//第一次分割完的结束位置是第二次分割的开始位置
            //新的结束位置
            end=parseInt(start+size);
            return blob;//返回分割后的每一个小切片
        }
        //发送(源文件,切片文件)
        function sendFile() {
         fd.append("file",file);
         fd.append("file_name",file.name);
         fd.append("blob",blob);
         fd.append("blob_num",blob_num);
         fd.append("blob_count",Math.ceil(file.size/size));//总共有几个切片
            $.ajax(
                {
                    url:"upload.php",
                    type:"post",
                    dataType:"json",
                    data:fd,
                    processData:false,
                    contentType:false,
                    success:function (data) {
                       console.log(data);
                    }
                })
            //做一个判断
            if(start<file.size){
                //继续执行发送
                var t=setTimeout(function () {
                    //先让编号自增1
                    blob_num++;
                    // 然后重新获得
                    blob=CutFile(file);
                    //执行上传
                    sendFile(file,blob);
                },1000)
            }else{
                //终止发送
                clearTimeout(t)
            }
    
        }
    })


    //PHP页面 后台处理

    <?php
    //设置字符集
    header("Content-type:text/html;Charset=utf-8");
    //接收数据
    $data=$_POST;
    $file=$_FILES;
    echo json_encode($data);
    //执行上传
    $path='./img/'.$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('./img/'.$data['file_name'].'_'.$i);
        }
        file_put_contents('./img/'.$data['file_name'],$b);
    }
    ?>
     
  • 相关阅读:
    CommonJS、AMD、CMD、NodeJs、RequireJS到底有什么联系?
    微信分享链接获取标题和小图片
    如何利用rem在移动端不同设备上让字体自适应大小
    基于VUE.JS的移动端框架Mint UI
    webpack超详细配置, 使用教程(图文)
    webpack一小时入门
    webpack入门教程
    前端构建工具gulpjs的使用介绍及技巧
    better-scroll在vue中的坑
    在vue 中使用Stylus
  • 原文地址:https://www.cnblogs.com/chaihtml/p/10093271.html
Copyright © 2020-2023  润新知