plupload多图上传插件上传到七牛云-TP5框架

引入CSS

<link rel="stylesheet" href="./jquery.ui/jquery-ui-1.10.4.custom.css" type="text/css" />
<link rel="stylesheet" href="./jquery.ui.plupload/css/jquery.ui.plupload.css" type="text/css" />

HTML结构

<div id="uploader"></div>

引入JS文件

<script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./jquery.ui/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript" src="./js/plupload.full.min.js"></script>
<script type="text/javascript" src="./jquery.ui.plupload/jquery.ui.plupload.js"></script>
<script type="text/javascript" src="./js/zh_CN.js"></script>

JS代码

    //当DOM准备好时初始化控件
    $(function() {
        $("#uploader").plupload({
            //上传插件初始化选用那种方式的优先级顺序，如果第一个初始化失败就走第二个，依次类推
            runtimes : 'html5,flash,silverlight,html4',
            url : '{:url("img/jieshou")}',//上传服务器地址
            max_file_count: 20,
            //当上传文件大于服务器接收端文件大小限制的时候，可以分多次请求发给服务器，如果不需要从设置中移出
            chunk_size: '4mb',
            //修改图片属性
//            resize : {
//                width : 800,
//                height : 800,
//                quality : 60,//质量
//                crop: false,//是否裁剪图片
//                preserve_headers: false//：压缩后是否保留图片的元数据，true为保留，false为不保留,默认为true。
//            },
            //选择文件扩展名的过滤器,每个过滤规则中只有title和ext两项[{title:'', extensions:''}]
            filters : {
                //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
                max_file_size : '2mb',
                //只允许上传图
                mime_types: [
                    {title : "Image files", extensions : "jpg,gif,png"},
//                    {title : "Zip files", extensions : "zip"}
                ],
                prevent_duplicates : false //不允许选取重复文件
            },
            rename: true,//布尔值，上传之前可以重命名文件，默认false，木有找到如何重命名啊
            sortable: true,//排序
            dragdrop: true,//开启可拖曳上传
            views: {
                list: true,
                thumbs: true, // Show thumbs
                active: 'thumbs'
            },
            flash_swf_url : '/static/vendor/plupload/Moxie.swf',//flash文件地址
            silverlight_xap_url : '/static/vendor/plupload/Moxie.xap' //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
        });
    });

后台PHP代码

    use Qiniu\Auth;//七牛
    use Qiniu\Storage\BucketManager;//七牛获取文件
    use Qiniu\Storage\UploadManager;//七牛上传
    public function jieshou(){
        $file = request()->file('file');// 获取表单上传文件
        $filePath = $file->getRealPath();//获取文件路径
        $accessKey = config('Access_Key');//Access Key
        $secretKey = config('Secret_Key');//Secret Key
        $auth = new Auth($accessKey, $secretKey); // 构建鉴权对象
        $bucketUrl = "http://share.520anan.com/";// 空间域名
        $bucket = "chen"; // 要上传的空间
        $token = $auth->uploadToken($bucket);// 生成上传 Token
        $ext = pathinfo($file->getInfo('name'), PATHINFO_EXTENSION);  //后缀
        $key = substr(md5($file->getRealPath()) , 0, 5). rand(0, 9999) . '.' . $ext;// 上传到七牛后保存的文件名
        $uploadMgr = new UploadManager(); // 初始化 UploadManager 对象并进行文件的上传
        list($ret, $err) = $uploadMgr->putFile($token, date("Ymd")."_share_".$key, $filePath);// 调用 UploadManager 的 putFile 方法进行文件的上传
        if ($err !== null) {
            var_dump($err);
        } else {
            return $bucketUrl . '/' . date("Ymd")."_share_".$key;//返回七牛云文件地址
        }
    }

上一篇：自己写的一个jQuery分页，基本上达到了50%代码，50%注释了

下一篇：Jquery带进度条轮播，可以左右切换+按钮切换