页面引入jquery 和 plupload.full.min.js(plupload.js)
// 封装ajax 给上传图片用
function reqAjax(cmd, data){
var deferred = $.Deferred();
$.ajax({
type:"post",
dataType: 'json',
url:"www.*********",
headers: {
apikey: sessionStorage.getItem('apikey') || 'test'
},
data: {
cmd: cmd,
data: JSON.stringify(data)
},
success: function(data){
deferred.resolve(data)
},
error: function(){
deferred.reject()
}
});
return deferred;
}
var OSSParams;
window.pluploadList = [];
// oss上传
function initUpload(arg) {
var uploader = new plupload.Uploader({
runtimes: 'html5,html4',
browse_button: arg.dom,
multi_selection: false,
unique_names: true,
url: 'http://oss.aliyuncs.com',
filters: {
mime_types: arg.flag,
max_file_size: arg.fileSize,
prevent_duplicates: false
}
});
uploader.init();
uploader.bind('FilesAdded', function (up, files) {
$(arg.dom).siblings('.cover').addClass('active')
startUpload(up, files[0]);
});
uploader.bind('UploadProgress', function(up, file) {
// console.log(file.percent)
$(arg.dom).siblings('.cover').find('p').eq(0).text(file.percent + '%');
});
uploader.bind('Error', function (up, err, file) {
if (err.code == -600) {
layer.msg("选择的文件过大,视频大小限制在20M以内,图片大小限制在5M以内", {icon: 2});
} else if (err.code == -500) {
layer.msg('初始化错误', {icon: 2})
} else if (err.code == -601) {
layer.msg("不支持该文件格式", {icon: 2});
} else if (err.code == -602) {
layer.msg("这个文件已经上传过一遍了", {icon: 2});
} else {
layer.msg("系统繁忙,请稍后再试!", {icon: 2});
}
$(arg.dom).siblings('.cover').find('p').eq(0).text('0%');
$(arg.dom).siblings('.cover').removeClass('active')
});
uploader.bind('FileUploaded', function (up, file, info) {
if (info && info.status == 200) {
var src = OSSParams.host + '/' + OSSParams.dir + '/' + file.name;
$(arg.dom).attr('src', src);
$(arg.dom).siblings('input[type="hidden"]').val(src);
layer.msg('上传成功!', {icon: 1})
} else {
layer.msg("系统繁忙,请稍后再试!", {icon: 2});
}
$(arg.dom).siblings('.cover').find('p').eq(0).text('0%');
$(arg.dom).siblings('.cover').removeClass('active')
});
window.pluploadList.push(uploader);
};
//初始化上传图片
initUpload({
dom: $('#upload_pic').siblings()[0],
flag: [{
title: '请上传图片',
extensions: 'jpg,png,jpeg,bmp'
}],
fileSize: "10mb"
});
function startUpload(up, file) {
getOssParams().then(function (data) {
file.name = randomName();
var fileName = data['dir'] + '/' + file.name;
up.setOption({
url: data['host'],
multipart_params: {
key: fileName,
policy: data['policy'],
OSSAccessKeyId: data['accessid'],
success_action_status: 200,
signature: data['signature']
}
});
up.start()
});
}
function randomName(len) {
len = len || 23;
var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
var maxPos = chars.length;
var str = '';
for (i = 0; i < len; i++) {
str += chars.charAt(Math.floor(Math.random() * maxPos));
}
return new Date().getTime() + str;
}
function getOssParams() {
var defer = $.Deferred();
if (OSSParams && OSSParams.expire > new Date().getTime() / 1000) {
defer.resolve(OSSParams);
} else {
var def = reqAjax('oss/ossUpload');
def.then(function(res){
OSSParams = res;
defer.resolve(res);
});
def.fail(function(err){
defer.reject();
layer.msg("系统繁忙,请稍后再试!");
});
}
return defer.promise();
}