不能直接用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,

首页,在页面引入:

<scriptsrc="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script><scripttype="text/javascript"src='https://unpkg.com/qiniu-js@2.4.0/dist/qiniu.min.js'></script>

页面的文件控件:

<inputtype="file"class="myfile"name="file"id="myfile"/>

js处理:

vardomain="";varfuncNext=function(res){/*接收上传进度信息,res参数是一个带有total字段的object,包含loaded(已上传大小,单位为字节。)、total(本次上传的总量)、percent(当前上传进度,范围:0~100。)三个属性,提供上传进度信息。*/console.log(res.percent);showInfo("已经上传"+res.percent+"%");}varfuncError=function(err){/*上传错误后触发,参数err为一个包含code、message、isRequestError三个属性的object*/console.log(err.message);alert("附件上传失败,"+err.message);}varfuncComplete=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();}functionmyUpload(){showLoading();$.ajax({url:"getUpToken.jsp",type:"post",dataType:"json",success:function(data){if(data==null||data==''){alert("远程获取token值为空!")return;}domain=data.domain;varfileBox=document.getElementById('myfile');varfileList=fileBox.files;varfilePath=$("#myfile").val();varkey1="aa_"+Date.parse(newDate())+filePath.substring(filePath.lastIndexOf("."),filePath.length);varputExtra={fname:"",//文件原文件名params:{},//用来放置自定义变量mimeType:null};varconfig={useCdnDomain:true,//表示是否使用cdn加速域名,为布尔值,true表示使用,默认为false。region:qiniu.region.z0//根据具体提示修改上传地区,当为null或undefined时,自动分析上传域名区域};varobservable=qiniu.upload(fileList[0],key1,data.token,putExtra,config);varsubscription=observable.subscribe(funcNext,funcError,funcComplete);},error:function(){alert("远程获取token失败");hideLoading();}});}