使用七牛云JS-SDK实现文件上传

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