[转载]Javascript—七牛云存储功能之浏览器文件上传

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_42187261/article/details/80319176

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

     
     

      
      

     
     
     
     

      
      

       
             }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       }