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() + "://" //获取路径(获取http://localhost:8080/) + 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/*" onchange="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)); } } }