170 lines
4.7 KiB
JavaScript
170 lines
4.7 KiB
JavaScript
//大于 4M 时可分块上传，小于 4M 时直传,设置分块大小（分块上传时，支持断点续传）
|
||
var BLOCK_SIZE = 4 * 1024 * 1024;
|
||
|
||
|
||
//token
|
||
var token;
|
||
var bucket = "makalu-img";
|
||
var domain = "http://1111.makalu.cc";
|
||
//获取token的授权
|
||
$.get("/mkl/api/getToken", function(data){
|
||
token = data;
|
||
});
|
||
|
||
|
||
//上传的文件信息
|
||
var file;
|
||
//上传对象
|
||
var observable;
|
||
//上传对象
|
||
var subscription;
|
||
|
||
|
||
//上传文件的名称
|
||
var key;
|
||
//配置信息
|
||
var config = {
|
||
//是否使用 cdn 加速域名：true 表示使用，默认为 false
|
||
useCdnDomain: true,
|
||
//是否禁用日志报告，为布尔值，默认为false
|
||
disableStatisticsReport: false,
|
||
//选择上传域名区域
|
||
/*
|
||
qiniu.region.z0: 代表华东区域
|
||
qiniu.region.z1: 代表华北区域
|
||
qiniu.region.z2: 代表华南区域
|
||
qiniu.region.na0: 代表北美区域
|
||
qiniu.region.as0: 代表东南亚区域
|
||
*/
|
||
region: qiniu.region.z0
|
||
};
|
||
|
||
|
||
|
||
var observer = {
|
||
next(res){
|
||
console.log(res);
|
||
// 接收上传进度信息
|
||
/*
|
||
total.loaded: number，已上传大小，单位为字节。
|
||
total.total: number，本次上传的总量控制信息，单位为字节，注意这里的 total 跟文件大小并不一致。
|
||
total.percent: number，当前上传进度，范围：0～100。
|
||
*/
|
||
|
||
$("#loaded").html(res.total.loaded);
|
||
$("#percent").html((res.total.percent).toFixed(2)+"%");
|
||
$("#percent2").html((res.total.percent).toFixed(2)+"%");
|
||
$("#loading").css("width",(res.total.percent).toFixed(2)+"%")
|
||
if(res.total.percent == 100){
|
||
$("#uploadState").val(2)
|
||
$("#loading").css("background","green")
|
||
}
|
||
console.log("当前已上传文件大小：" + res.total.loaded +"Byte");
|
||
console.log("已上传文件百分比：" + res.total.percent + "%");
|
||
|
||
},
|
||
error(err){
|
||
console.log(err);
|
||
alert("上传出错,请修改文件名称后重试")
|
||
},
|
||
complete(res){
|
||
console.log("文件上传成功");
|
||
console.log(res);
|
||
getFileQiniu(res);
|
||
if (res.key && res.key.match(/\.(jpg|jpeg|png|gif)$/)) {
|
||
catImg(domain,res.key);
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
var putExtra ={
|
||
//文件原文件名
|
||
fname: "",
|
||
//用来放置自定义变量
|
||
params: {},
|
||
//用来限定上传文件类型，指定null时自动判断文件类型 ["image/png", "image/jpeg", "image/gif"]
|
||
mimeType: null
|
||
};
|
||
|
||
|
||
|
||
$("#selectFile").change(function(){
|
||
//获取当前选择的文件
|
||
file = this.files[0];
|
||
//当选择文件不为空时
|
||
if (file) {
|
||
$("#uploadState").val(1)
|
||
fileas(this,file)
|
||
//获取上传文件的名称
|
||
var pattern=/[`~!@#$^\-&*()=|{}':;',\\\[\]<>\/?~！@#￥……&*（）——|{}【】'；：""'。，、？%\s]/g;
|
||
key = "AQZG_SG/"+Date.now() + file.name.replace(pattern,"");
|
||
console.log(key)
|
||
//校验文件大小
|
||
checkFileSize(file);
|
||
putExtra.fname = key.split(".")[0];
|
||
//执行文件上传
|
||
observable = qiniu.upload(file, key, token, putExtra, config);
|
||
subscription = observable.subscribe(observer)
|
||
} else {
|
||
alert("选择文件不能为空!")
|
||
}
|
||
})
|
||
|
||
function uploadFile(e) {
|
||
//获取当前选择的文件
|
||
file = e.files[0];
|
||
//当选择文件不为空时
|
||
if (file) {
|
||
$("#uploadState").val(1)
|
||
fileas(e,file)
|
||
//获取上传文件的名称
|
||
var pattern=/[`~!@#$^\-&*()=|{}':;',\\\[\]<>\/?~！@#￥……&*（）——|{}【】'；：""'。，、？%\s]/g;
|
||
key = "AQZG_SG/"+Date.now() + file.name.replace(pattern,"");
|
||
console.log(key)
|
||
//校验文件大小
|
||
checkFileSize(file);
|
||
putExtra.fname = key.split(".")[0];
|
||
//执行文件上传
|
||
observable = qiniu.upload(file, key, token, putExtra, config);
|
||
subscription = observable.subscribe(observer)
|
||
} else {
|
||
alert("选择文件不能为空!")
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 文件大小校验
|
||
* @param file
|
||
*/
|
||
function checkFileSize(file) {
|
||
//计算分块大小
|
||
let count = Math.ceil(file.size / BLOCK_SIZE);
|
||
//文件大于限制禁止上传
|
||
if (file.size > 10 * 1024 * 1024 * 1024) {
|
||
console.log("不支持上传大于10G");
|
||
return;
|
||
}
|
||
if(count > 1){
|
||
console.log("大文件, 执行分块上传，支持断点续传!")
|
||
} else {
|
||
console.log("小文件上传!")
|
||
}
|
||
}
|
||
|
||
|
||
function catImg(domain,key){
|
||
$("#catImg").attr("src",domain+"/"+key)
|
||
}
|
||
|
||
|
||
//上传发起
|
||
$("#sub").click(function (){
|
||
subscription = observable.subscribe(observer)
|
||
});
|
||
|
||
// 上传取消
|
||
$("#cancel").click(function(){
|
||
subscription.unsubscribe()
|
||
}) |