发布

把七牛云上传sdk整合进layui

未结贴
1 2737
shufan209 shufan209 学前班 技术
悬赏:0 飞吻发布于 2017-02-08
一,如图;


二,申请个七牛账号并认证, 点击去申请七牛云账号
三,创建密钥,AK/SK,和空间(BACK_NAME)


四,php生成上传token (引入创建的AK,SK,BACK_NAME)

CODE


private function createScope(){
$scopeData["scope"]=C("BACK_NAME");
$scopeData["deadline"]=time()+3600;
return json_encode($scopeData);
}

private function base64_urlSafeEncode($data){
$find = array('+', '/');
$replace = array('-', '_');
return str_replace($find, $replace, base64_encode($data));
}

private function encodedPutPolicy(){
return $this->base64_urlSafeEncode($this->createScope());
}

private function encodedSign(){
$hmac = hash_hmac('sha1', $this->encodedPutPolicy(), C("QINIU_SK"), true);
return $this->base64_urlSafeEncode($hmac);
}



public function uptokens(){
header("Content-type: text/json; charset=utf-8");
$tokenData["success"]=true;
$tokenData["code"]=200;
$tokenData["msg"]="操作成功";
$tokenData["token"] = C("QINIU_AK") . ':' . $this->encodedSign() . ':' . $this->encodedPutPolicy();
echo json_encode($tokenData);
exit();
}

五,引入plupload上传插件,和七牛js-sdk


六,js写法,

CODE


picture: function(editor) { //插入图片
layer.open({
type: 1,
id: 'fly-jie-upload',
title: '插入图片',
area: 'auto',
shade: false,
area: '300px',
skin: 'layui-layer-border',
content: ['上传文件'].join(''),
success: function(layero, index) {
$.ajax({
type: "POST",
url: "/api/uptokens/",
dataType: "json",
success: function(data) {
if (data.code != 200) return layer.close(index), layer.msg('无效token', {
icon: 5
});
$("#upload-progress").css({"background":"url(/Public/default/images/loading.jpg) no-repeat","background-size":"00%"});
var uploader = Qiniu.uploader({
runtimes: 'html5,flash,html4',
browse_button: 'pickfiles',
uptoken_url: '/api/uptokens/',
uptoken: data.token,
unique_names: false,
save_key: false,
domain: 'http://qiniu-plupload.qiniudn.com/',
get_new_uptoken: false,
container: 'container',
max_file_size: '1mb',
max_retries: 3,
dragdrop: !0,
drop_element: 'container',
chunk_size: '1mb',
filters: {
mime_types: [{
title: "Image files",
extensions: "jpg,gif,png,jpeg"
}]
},
auto_start: !0,
init: {
'FilesAdded': function(up, files) {
$("#upload-progress").text("上传中......");
plupload.each(files, function(file) {});
},
'BeforeUpload': function(up, file) {},
'UploadProgress': function(up, file) {
$("#upload-progress").css({
"background-size": up.total.percent + "0%"
})
},
'FileUploaded': function(up, file, info) {
var z = JSON.parse(info);
var img_domain = "http://view20161106.wedlaa.com/"
var imageView = "?imageView2/0/w/756"; //限定长边
layui.focusInsert(editor[0], 'img[' + img_domain + z.key + imageView + '] \n');
},
'Error': function(up, err, errTip) {
layer.msg('上传失败', {
icon: 5
})
},
'UploadComplete': function(data) {
$("#upload-progress").text("上传文件");
layer.close(index);
},
'Key': function(up, file) {
//var key = "";
//return key
}
}
});
}
});
}
});
}

热忱回答1我来回答

分享到: