最近有一个项目需要集成七牛云存储的图片存储和调用功能,程序是基于CodeIgniter 2.1.3的PHP框架。刚拿到手完全无从下手的感觉,因为像框架这种东西,想从官方的PHPSDK集成进去,需要改动很多地方。还好,有前辈蹚水,我等后辈直接参考或者说是拿来用了。上传插件采用的是plupload。
plupload:www.plupload.com/
多附件上传控件plupload的使用心得:www.cnblogs.com/luckybird/archive/2013/01/15/2861072.html
七牛云存储:qiniu.com
为做备份之用,还是整篇拉过来一份吧:
最近想做个相册系统,平时都是使用ThinkPHP来开发的,但是这次想换一个PHP框架试试,于是选择了CodeIgniter框架,因为熟悉了TP框架,所以CodeIgniter学起来也相对容易点. 网上搜了一下,几乎没有CodeIgniter结合七牛的案例,加上自己也是初次使用CodeIgniter和七牛,所以花了一整天的时间在研究这个,用到的上传插件是Plupload,在这里分享给大家,希望对大家有帮助。 修改七牛php-sdk 首先下载七牛的php-sdk,将压缩包内的qiniu文件夹放置到CodeIgniter框架applicationlibraries文件夹下.因为CodeIgniter的类库对命名有要求,而七牛sdk的类库文件名和类名不一致,所以需要稍微修改下sdk里面的文件名.
将io.php修改为Qiniu_PutExtra.php 将rs.php修改为Qiniu_RS_GetPolicy.php 将fop.php修改为Qiniu_ImageView.php
引入Plupload并初始化
1<script type="text/javascript" src="<?php echo base_url(); ?>public/js/jquery-1.11.1.min.js" ></script>2<script type="text/javascript" src="<?php echo base_url(); ?>public/js/plupload/plupload.full.min.js" ></script>3<script type="text/javascript" src="<?php echo base_url(); ?>public/js/plupload/jquery.plupload.queue/jquery.plupload.queue.min.js" ></script>4<script type="text/javascript" src="<?php echo base_url(); ?>public/js/plupload/i18n/zh_CN.js" ></script>5<link rel="stylesheet" href="<?php echo base_url(); ?>public/js/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css" />
在模板中添加标签,用于显示上传区域
1<div id="muilti_uploader">2 <p>你的浏览器没有安装Flash插件,或不支持HTML5</p>3</div>
设置参数,初始化Plupload(下面有个eval的地方需要手动去掉中间的空格)
1<script type="text/javascript">2$(function() {3 var photos = Array(); // 用于存放照片信息4 // 设置参数,初始化Plupload5
6 $("#muilti_uploader").pluploadQueue({7
8 runtimes : 'html5,flash,silverlight,html4',9
10 url : "http://up.qiniu.com/",11
12 chunk_size : '512kb',13
14 rename : true,15
93 collapsed lines
16 dragdrop: true,17
18 filters : {19
20 max_file_size : '10mb',21
22 mime_types: [23
24 {title : "Image files", extensions : "jpg,jpeg,gif,png"},25
26 {title : "Zip files", extensions : "zip"}27
28 ]29
30 },31
32 multipart: true,33
34 multipart_params: {35
36 'token': '<?php echo $upToken;?>', //token,需要从服务器获取37
38 },39
40 flash_swf_url : '<?php echo base_url(); ?>public/js/plupload/Moxie.swf'41
42 });43
44 var uploader = $('#muilti_uploader').pluploadQueue();45
46 //上传文件之前触发47
48 uploader.bind('BeforeUpload', function(uploader, file){49
50 var file_ext = file.name.substr(file.name.lastIndexOf(".")); // 图片后缀51
52 //指定文件的名称,如果不设置,七牛会默认将文件的hash值作为文件的名字53
54 uploader.settings.multipart_params.key = parseInt(new Date().valueOf()/1000) + '-' + parseInt(Math.random()*8999 + 1000) + file_ext;55
56 });57
58 //成功上传一个文件后触发59
60 uploader.bind('FileUploaded', function(uploader, file, responseObject) {61
62 //将七牛返回的json数据转换成对象63
64 var res = ev al('('+responseObject.response+')');65
66 //组合文件信息67
68 var photo = new Object();69
70 //因为在数据库中,我用字段名name来存储文件名,用path来存储七牛上的文件名71
72 //所以这里的photo对象属性为name和path,如果你用的字段名和我的不一样,请自行修改73
74 photo.name = file.name; // 上传之前的图片名称75
76 photo.path = res.key; // 保存后的图片名称(含前缀)77
78 photos.push(photo); //将对象压入到photos数组79
80 });81
82 //全部文件上传完成后触发83
84 uploader.bind('UploadComplete', function(uploader, file){85
86 //文件全部成功上传后,将数据传递给CI框架进行处理87
88 $.ajax({89
90 url: "<?php echo site_url('photo/save'); ?>", //ci框架处理地址91
92 type: "POST",93
94 data: {files:JSON.stringify(photos)},95
96 success: function(msg){97
98 ale rt(msg);99
100 }101
102 });103
104 });105
106});107
108</script>
CodeIgniter代码部分
在控制器中编写一个方法,用来显示刚才的视图页面.
1/**2
3 * 上传照片页面4
5 * @return void6
7 */8
9public function upload()10
11{12
13 //载入七牛sdk类库14
15 $this->load->library('qiniu/Qiniu_PutExtra');116 collapsed lines
16
17 $this->load->library('qiniu/Qiniu_RS_GetPolicy');18
19 //配置七牛云存储,请查看自己的七牛账号20
21 $bucket = ""; //你的七牛云存储的空间名称22
23 $accessKey = ''; //公钥24
25 $secretKey = ''; //密钥26
27 Qiniu_SetKeys($accessKey, $secretKey);28
29 $putPolicy = new Qiniu_RS_PutPolicy($bucket);30
31 //生成token32
33 $data['upToken'] = $putPolicy->Token(null);34
35 //载入视图36
37 $this->load->view('photo_upload', $data);38
39}40
41编写一个方法,用来存储文件信息到自己的数据库.42
43/**44
45 * 保存照片46
47 * @return string48
49 */50
51public function save()52
53{54
55 //载入七牛SDK类库56
57 $this->load->library('qiniu/Qiniu_RS_GetPolicy');58
59 $this->load->library('qiniu/Qiniu_ImageView');60
61 $bucket = ""; //你的七牛云存储的空间名称62
63 $domain = ''; //你的七牛云存储空间的地址64
65 $accessKey = ''; //公钥66
67 $secretKey = ''; //密钥68
69 Qiniu_SetKeys($accessKey, $secretKey);70
71 $imgInfo = new Qiniu_ImageInfo;72
73 // 组合数据74
75 if (isset($_POST['files']) && !empty($_POST['files'])) {76
77 $files = json_decode($_POST['files'], true);78
79 foreach ($files as $key => $value) {80
81 //生成baseUrl82
83 $baseUrl = Qiniu_RS_MakeBaseUrl($domain, $value['path']);84
85 //生成fopUrl86
87 $imgInfoUrl = $imgInfo->MakeRequest($baseUrl);88
89 //获取七牛上的图片属性90
91 // format 图片类型,如png、jpeg、gif、bmp等。92
93 // width 图片宽度,单位:像素(px)。94
95 // height 图片高度,单位:像素(px)。96
97 // colorModel 彩色空间,如palette16、ycbcr等。98
99 // frameNumber 帧数,gif 图片会返回此项。100
101 $arr = json_decode(file_get_contents($imgInfoUrl), true);102
103 $files[$key]['name'] = substr($value['name'], 0, strrpos($value['name'], '.')); //只保留文件名部分,去除文件名后缀104
105 $files[$key]['width'] = $arr['width']; //图片宽度106
107 $files[$key]['height'] = $arr['height']; //图片高度108
109 $files[$key]['create_time'] = time();//创建时间110
111 }112
113 }114
115 // 插入数据库116
117 if ($this->db->insert_batch('photos', $files)) {118
119 echo '上传成功';120
121 die;122
123 } else {124
125 echo '上传失败';126
127 die;128
129 }130
131}
代码中注释写的很全,应该没有需要补充的地方了,代码拿来直接可用,非常省心