1. 一个异步上传的插件uploadify
在html中引入uploadify的js和css文件。 tp5中如
html如下:
<link rel="stylesheet"type="text/css"href="__STATIC__/admin/uploadify/
uploadify.css" />
{load href="__STATIC__/admin/uploadify/jquery.uploadify.min.js"}
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2">缩略图:</label>
<div class="formControls col-xs-8 col-sm-9">
<input id="file_upload" type="file" multiple="true" >
<img style="display: none" id="upload_org_code_img" src="" width="150" height="150">
<input id="file_upload_image" name="image" type="hidden" multiple="true" value="">
</div>
</div>
javascript调用代码如下:
<script>
// 图片上传的一个文件
swf = "__STATIC__/admin/uploadify/uploadify.swf";
// 图片上传的接口
image_upload_url = "{:url('image/upload')}"; //自己修改成自己的
$(function() {
$("#file_upload").uploadify({
'swf' : swf,
'uploader' : image_upload_url,
'buttonText' : '图片上传',
'fileTypeDesc' : 'Image files',
'fileObjName' : 'file',
'fileTypeExts' : '*.gif; *.jpg; *.png',
'onUploadSuccess' : function(file, data, response) {
//console.log(file);
//console.log(data);
//console.log(response);
var obj = JSON.parse(data);
//console.log(obj);
if(response){
$('#upload_org_code_img').attr('src',obj.data);
$('#file_upload_image').attr('value',obj.data);
$('#upload_org_code_img').show();
}
}
});
});
对于qiniu类库的下载,一是通过composer,如果电脑中有composer,安装很快捷,
在项目根目录下php composer.phar require qiniu/php-sdk,或者composer require qiniu/php-sdk等待即可完成。
对于电脑中没有composer的,可以直接下载提供的符合 Composer 规范的vendor 压缩包并在本地解压。解压后的内容和使用 Composer 方式获取到的内容完全一致,之后的使用方式也一致。
或者下载源代码sdk包放在vender中,对于tp5在使用时require VENDER_PATH.'php-sdk-7.1.x/autoload.php';也可以放在随意文件目录总,只要引入就行了。
即可。
封装的上传类如下:
<?php
namespace app\common\lib;
// 引入鉴权类
use Qiniu\Auth;
// 引入上传类
use Qiniu\Storage\UploadManager;
//如果不是使用composer的话就需要require VENDOR_PATH.'qiniu/php-sdk-7.2/autoload.php';
/**
* 七牛图片上传基础类库
*/
class Upload
{
public static function image(){
if(empty($_FILES['file']['tmp_name'])){
exception('你提交的图片数据不合法',404);
}
// 图片的本地路径
$file = $_FILES['file']['tmp_name'];
// 换取上传图片的后缀
// $ext = explode('.',$_FILES['file']['name'])[1];
$pathinfo = pathinfo($_FILES['file']['name']);
$ext = $pathinfo['extension'];
$config = config('qiniu');
// 构建一个鉴权对象
$auth = new Auth($config['ak'],$config['sk']);
// 生成上传的token
$token = $auth->uploadToken($config['bucket']);
// 上传到七牛后保存的文件名
$key = date('Y').'/'.date('m').'/'.substr(md5($file),0,5).date('YmdHis').mt_rand(0,9999).'.'.$ext;
// 初始化UploadManager类
$uploadMgr = new UploadManager();
list($ret,$err) = $uploadMgr->putFile($token,$key,$file);
if($err !== null){
return null;
}else{
return $key;
}
}
}
对于调用:(就是那么简单)
/**
* 七牛图片上传
* @return [type] [description]
*/
public function upload(){
// 捕获异常
try{
// 返回qiniu上的文件名
$image = Upload::image();
}catch(\Exception $e){
echo json_encode(['status'=>0,'message'=>$e->getMessage()]);
}
// 返回给uploadify插件状态
if($image){
$data = [
'status' => 1,
'message' => 'OK',
'data' => config('qiniu.image_url').'/'.$image,
];
echo json_encode($data);exit;
}else{
echo json_encode(['status'=>0,'message'=>'上传失败']);
}
}