//大于 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() })