发布

把七牛云上传sdk整合进layui

未结贴
5 3212
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
}
}
});
}
});
}
});
}

热忱回答5我来回答

    小五哥

    已帮纠正,本站过滤了很多

    2017-02-09 回复
    shufan209

    @小五哥
    小哥,能分享下此站的静态网页么?

    2017-02-17
    166781986306

    @小五哥 微信斗牛群谁有,谁有微信斗牛群 认准群主微信V16671986306

    14 天前
    加载更多
    周佳

    发财微信:13787031280!!!!百人大群!24小时不停歇!无需押金,分想下多少下多少!随时上下分!绝对保证比例一样无差价!!牛牛//炸金花//三公//跑得快等各种大小玩法!!!自动局内结算!!不会跑路!!全是真实玩家对战!!拒绝外挂和吃分!!!公司运行这个平台有近5年!!安全靠谱!不用建群不会封号!没有后台控制,真实IP地址可查,欢迎前来咨询了解!招代理!!同行勿扰!谢谢!!

    34 天前 回复
    166781986306

    微信斗牛群谁有,谁有微信斗牛群 认准群主微信V16671986306

    14 天前 回复
分享到: