不能直接用form提交的形式上传到七牛的某个服务器,比如:
$.ajax({
url:"https://up-z0.qiniu.com/",
type:"post",
data:form,
processData:false,
contentType:false,
success:function(data){
alert("附件已上传成功!");
},
error:function(e){
}
});
因为跨域提交数据,浏览器会阻止该请求,提示:ERR_INSECURE_RESPONSE
所以,要使用七牛的sdk,
首页,在页面引入:
<script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src='https://unpkg.com/qiniu-js@2.4.0/dist/qiniu.min.js'></script>
页面的文件控件:
<input type="file" class="myfile" name="file" id="myfile" />
js处理:
var domain = "";
var funcNext=function(res){
/* 接收上传进度信息,res 参数是一个带有 total 字段的 object,包含loaded(已上传大小,单位为字节。)、total(本次上传的总量)、percent(当前上传进度,范围:0~100。)三个属性,提供上传进度信息。*/
console.log(res.percent);
showInfo("已经上传"+res.percent+"%");
}
var funcError=function(err){
/*上传错误后触发,参数 err 为一个包含 code、message、isRequestError 三个属性的 object */
console.log(err.message);
alert("附件上传失败,"+err.message);
}
var funcComplete=function(res){
/*接收上传完成后的后端返回信息,res 参数为一个 object,默认为hash和key, */
console.log(domain+res.key);
$("#logo").val(domain+res.key);
$("#fileTmpList").html("上传后文件:"+domain+res.key);
mainpic = true;
sAlert("附件已上传成功!");
swal.hideLoading();
}
function myUpload(){
showLoading();
$.ajax({
url:"getUpToken.jsp",
type:"post",
dataType : "json",
success: function(data){
if (data == null || data == '') {
alert("远程获取token值为空!")
return;
}
domain = data.domain;
var fileBox = document.getElementById('myfile');
var fileList = fileBox.files;
var filePath = $("#myfile").val();
var key1 ="aa_"+Date.parse(new Date())+filePath.substring(filePath.lastIndexOf("."),filePath.length);
var putExtra = {
fname: "", //文件原文件名
params: {},//用来放置自定义变量
mimeType: null
};
var config = {
useCdnDomain: true, //表示是否使用 cdn 加速域名,为布尔值,true 表示使用,默认为 false。
region: qiniu.region.z0 // 根据具体提示修改上传地区,当为 null 或 undefined 时,自动分析上传域名区域
};
var observable = qiniu.upload(fileList[0], key1, data.token, putExtra, config);
var subscription = observable.subscribe(funcNext, funcError, funcComplete) ;
},
error: function(){
alert("远程获取token失败");
hideLoading();
}
});
}