不能直接用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(); } }); }
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。