1、添加js文件
<script type="text/javascript" src="/resources/js/jquery/jquery-1.7.min.js"></script>
<script type="text/javascript" src="/resources/js/qiniu/qiniu.min.js"></script>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" //获取路径
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
2、所需jar包
<dependencies>
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>qiniu-java-sdk</artifactId>
<version>7.2.11</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>com.squareup.okhttp3</groupId>
<artifactId>okhttp</artifactId>
<version>3.3.1</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.6.2</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>happy-dns-java</artifactId>
<version>0.1.4</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>
</dependencies>
3、html代码
<input type="file" id="frontImg" name="myfiles" accept="image/*" οnchange="ajaxFileUpload(this)">
<img src="#" alt="" id="img">
4、JS代码
function ajaxFileUpload(obj) {
var fileName = $(obj).val(); //上传的本地文件绝对路径
var suffix = fileName.substring(fileName.lastIndexOf("."),fileName.length); //后缀名
var file = $(obj).get(0).files[0]; //上传的文件
var size = file.size > 1024 ? file.size / 1024 > 1024 ? file.size / (1024 * 1024) > 1024 ? (file.size / (1024 * 1024 * 1024)).toFixed(2) + 'GB' : (file.size
/ (1024 * 1024)).toFixed(2) + 'MB' : (file.size
/ 1024).toFixed(2) + 'KB' : (file.size).toFixed(2) + 'B'; //文件上传大小
//七牛云上传
$.ajax({
type:'post',
url: "<%=basePath%>QiniuUpToken",
data:{"suffix":suffix},
dataType:'json',
success: function(result){
if(result.success == 1){
var observer = { //设置上传过程的监听函数
next(result){ //上传中(result参数带有total字段的 object,包含loaded、total、percent三个属性)
Math.floor(result.total.percent); //查看进度[loaded:已上传大小(字节);total:本次上传总大小;percent:当前上传进度(0-100)]
},
error(err){ //失败后
alert(err.message);
},
complete(res1){ //成功后
//****:填写你的绑定域名或七牛云提供的测试域名
//?imageView2/2/h/100:展示缩略图,不加显示原图
$("#img").attr("src","****/"+result.imgUrl+"?imageView2/2/h/100");
}
};
var putExtra = {
fname: "", //原文件名
params: {}, //用来放置自定义变量
mimeType: null //限制上传文件类型
};
var config = {
region:qiniu.region.z0, //存储区域(z0: 代表华东;不写默认自动识别)
concurrentRequestLimit:3 //分片上传的并发请求量
};
var observable = qiniu.upload(file,result.imgUrl,result.token,putExtra,config);
observable.subscribe(observer) // 上传开始
}else{
alertMsg(result.message); //获取凭证失败
}
},error:function(){ //服务器响应失败处理函数
alertMsg("服务器繁忙");
}
});
}
5、后台代码
/**
* 七牛云上传生成凭证
* @param request
* @param response
* @throws Exception
*/
@Controller
public class QiniuUpload {
@RequestMapping("QiniuUpToken")
public void QiniuUpToken(@RequestParam String suffix,HttpServletRequest request, HttpServletResponse response) throws Exception{
PrintWriter out = null;
Map<String,Object> result = new HashMap<String,Object>();
try {
String accessKey = "****"; //访问秘钥
String secretKey = "****"; //授权秘钥
String bucket = "****"; //存储空间名称
Auth auth = Auth.create(accessKey, secretKey); //验证七牛云身份是否通过
out = response.getWriter();
//生成凭证
String upToken = auth.uploadToken(bucket);
result.put("token", upToken);
// 是否可以上传的图片格式
/*boolean flag = false;
String [] imgTypes= new String[]{"jpg","jpeg","bmp","gif","png"};
for(String fileSuffix :imgTypes) {
if(suffix.substring(suffix.lastIndexOf(".") + 1).equalsIgnoreCase(fileSuffix)) {
flag = true;
break;
}
}
if(!flag) {
throw new Exception("图片:" + suffix + " 上传格式不对!");
}*/
//生成实际路径名
String randomFileName=UUID.randomUUID().toString() +suffix;
result.put("imgUrl", randomFileName);
result.put("success", 1);
out.write(JsonUtil.objectToJson(result));
} catch (Exception e) {
result.put("success", 0);
result.put("message", "获取凭证失败,"+e.getMessage());
out.write(JsonUtil.objectToJson(result));
}
}
}