博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
七牛js-sdk上传文件到服务器
阅读量:6250 次
发布时间:2019-06-22

本文共 2477 字,大约阅读时间需要 8 分钟。

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

首页,在页面引入:

页面的文件控件:

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();					}				});		      						}

转载地址:http://slusa.baihongyu.com/

你可能感兴趣的文章
mysql的引双向链表_Mysql高手系列 - 第22篇:mysql索引原理详解(高手必备技能)
查看>>
mysql in 查询改成_MySQL not in嵌套查询改写成外连接方式
查看>>
mysql community安装_MySQL Community Server 5.7安装详细步骤
查看>>
python处理多行字符串_python多行字符串
查看>>
java冒泡排序_用java写个冒泡排序?
查看>>
linux 开发java_做开发环境的操作系统是 Linux 好还是 Windows 好?
查看>>
java正文提取_Java网页正文提取工具
查看>>
blocked java_使用jstack排查多线程死锁、阻塞
查看>>
centos7 nohup无法保持_CentOS 不间断会话(ssh关闭后如何保证程序继续运行)(nohup和screen)...
查看>>
显示图片java代码_用于显示下载或是显示图片的一段代码
查看>>
java scrip_js java scrip基本语法
查看>>
java 加上天数_java日期时间加上天数 | 学步园
查看>>
java 爬楼梯算法_9.1 爬楼梯
查看>>
java多态 动态绑定_Java JVM 多态(动态绑定)
查看>>
jpa 去重_JPA 查询Distinct Join条件示例
查看>>
mysql date 索引性能_【转】MYSQL数据库时间字段INT,TIMESTAMP,DATETIME性能效率比较
查看>>
java 加密解密算法_用JAVA设计一个简单的加密、解密算法,用该算法来实现对数据的加密、解密...
查看>>
java 窗口最小化_Java使窗口最小化为图标
查看>>
hessian java php_hessian在PHP中的使用
查看>>
虚幻4能用java吗_如果用虚幻四引擎开发我的世界而非java 它会比现在取得更好的成绩吗?...
查看>>