JQuery文件分段上传插件-fcup

本文基于TP5操作
1.相关基础文件放置
JQuery文件分段上传插件-fcup
2.html文件相关

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>江测试-jquery文件分段上传插件-fcup</title>
    <!-- 引入css -->
    <link href="/fcup/css/style.css" rel="stylesheet" />
</head>
<body>
<div id="test1">上传LOGO</div>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<!--  引入js  -->
<script src="/fcup/js/jquery.fcup.js"></script>
<script>
    $.fcup({
        updom: '#test1',//上传控件的位置dom
        //upid: 'upid',//上传的文件表单id，有默认
        shardsize: '2',//切片大小,(单次上传最大值)单位M，默认2M
        upmaxsize : '1024',//上传文件大小,单位M，不设置不限制
        upstr: '上传文件',//按钮文字
        uploading: '上传中...',//上传中的提示文字
        upfinished: '上传完成',//上传完成后的提示文字
        upurl: 'uploadLogo',//文件上传接口 node接口:http://127.0.0.1:8888/upload
        //uptype: 'mp4',//上传类型检测,用,号分割
        errmaxup: '上传文件过大',//检测文件是否超出设置上传大小
        errtype: '请上传mp4文件',//不支持类型的提示文字
        //接口返回结果回调
        upcallback : function(result){
            console.log(result);
            /*
             if (result !== 'success') {
             $.fcupStop('出现错误');//终止运行,并且在按钮上显示内容
             }
             */

        }
    });
</script>
</body>
</html>

JQuery文件分段上传插件-fcup

3.php处理文件

<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2019/1/23
 * Time: 14:00
 */

namespace app\admin\controller;


class Test extends Admin
{
    /**
     * 首页
     */
    public function index(){
        return $this->fetch();
    }

    /**
     * 上传图片
     */
    public function uploadLogo(){
        header("Content-type: text/html; charset=utf-8");
        $file = isset($_FILES['file_data']) ? $_FILES['file_data']:null; //分段的文件
        $name = isset($_POST['file_name']) ? '../upload/'.$_POST['file_name']:null; //要保存的文件名
        $total = isset($_POST['file_total']) ? $_POST['file_total']:0; //总片数
        $index = isset($_POST['file_index']) ? $_POST['file_index']:0; //当前片数
        $md5   = isset($_POST['file_md5']) ? $_POST['file_md5'] : 0; //文件的md5值
        $size  = isset($_POST['file_size']) ?  $_POST['file_size'] : null; //文件大小
        if(!$file || !$name){
            echo 'failed';
            die();
        }
        //组装新的图片文件块名称
        $nameArr = explode('.',$name);
        $nameEnd    = '.'.strtolower($nameArr[3]);
        $pieceName  = $md5.'_'.$index.$nameEnd;
        $res = move_uploaded_file($file['tmp_name'],'../public/images/upload/tmp/'.$pieceName);
        if( !$res ) {
            //切块移动失败，报错
            $return_data = array('code'=>1,'msg'=>'发生未知错误！','data'=>'123');
            echo json_encode($return_data);die;
        }

        //判断当前块是不是最后一块，如果是则拼接，不是则继续！
        if( $index == $total ) {
            //当所有切块都传过来了，则进行拼接，重命名，并将图片移到指定文件夹，删除图片各块！
            $blob = '';
            for($i=1; $i<= $total; $i++){
                $blob .= file_get_contents('../public/images/upload/tmp/'.$md5.'_'.$i.$nameEnd);
            }
            //2019-1-13
            if($nameEnd === '.tencent'){
                $newName = str_replace('.', '', microtime(true)).rand(1,9).'.jpg';
            }else{
                $newName = str_replace('.', '', microtime(true)).rand(1,9).$nameEnd;
            }

            $r = file_put_contents('../public/images/upload/logo/'.$newName,$blob);
            //删除图片块文件
            for($i=1; $i<= $total; $i++){
                @unlink('../public/images/upload/tmp/'.$md5.'_'.$i.$nameEnd);
            }
            $newpath = $this->thumbImage('../public/images/upload/logo/'.$newName);
            if( $r ) {
                //图片拼接成功,并返回图片路径
                $return_data = array(
                    'code'=>1,
                    'msg'=>'上传完成！',
                    'data'=>'/public/images/upload/logo/'.$newName,
                    'small'=>$newpath,
//                    'small'=>'/images/upload/logo/'.$newName,
                );
                echo json_encode($return_data);die;
            }else{
                //图片拼接失败，则给出提示并重传
                $return_data = array('code'=>-1,'msg'=>'上传失败！','data'=>'');
                echo json_encode($return_data);die;
            }

        }else{
            $return_data = array(
                'code'=>0,
                'msg'=>'上传中,请等待！',
                'data'=>''
            );
            echo json_encode($return_data);die;
        }
    }
    /**
     * tp5生成缩略图
     */
    public function thumbImage($file){
        $small_name = explode('/',$file);
        $small_name = explode('.',$small_name[5]);
        $image = \think\Image::open($file);
        $image->thumb(300,300)->save('../public/images/upload/logo/'.$small_name[0].'_bf.png');
        return '/public/images/upload/logo/'.$small_name[0].'_bf.png';
    }
}

即可。

JQuery文件分段上传插件-fcup

相关推荐