七牛上传图片实例

//这是后台java代码(控制层)

package com.qiniu.util;

import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.Date;
import java.util.List;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.json.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.fastjson.JSON;
import com.qiniu.common.Zone;
import com.qiniu.http.Response;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.UploadManager;



/***
 * 上传七牛类
 */
@SuppressWarnings("serial")
@Controller
@RequestMapping("/uploadController")
public class UploadController extends HttpServlet{
    //设置好账号的ACCESS_KEY和SECRET_KEY
    public static final String ACCESS_KEY = "";//""中填写七牛密匙管理中的AK
    public static final String SECRET_KEY = "";//""中填写七牛密匙管理中的SK
   //要上传的空间
    public static final String bucketname = "";//""中填写上传的空间名
    public static final String waiUrl= "";//""中填写七牛分配的域名
    
    
    @RequestMapping(params = "uploadfile")
    @ResponseBody
    public String uploadFile(HttpServletRequest req) throws IOException{
        
        
        String REt=null;
        InputStream file =haveFileNames(req);
        byte[] bt=inputStreamToByte(file);
        JSONObject jsonObject = new JSONObject();
        if(file!=null){
           //上传到七牛后保存的文件名
            String key = huoKeyname();
            //密钥配置
            Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);
            Zone z = Zone.autoZone();
            Configuration c = new Configuration(z);
            //创建上传对象
            UploadManager uM = new UploadManager(c);
           
            try {
                String backMsg=(new UploadController()).upload(key,uM,auth,bt);
                jsonObject.put("url",waiUrl+""+key);
                jsonObject.put("msg",backMsg);
                REt= jsonObject.toString();
            } catch (IOException e) {
                e.printStackTrace();
                jsonObject.put("url","");
                jsonObject.put("msg","error");
                REt=jsonObject.toString();
            }finally{
                file.close();
            };
        }else{
            jsonObject.put("url","");
            jsonObject.put("msg","error");
            REt=jsonObject.toString();
        }
        return REt;
    }
       
    /**
     * 获取uptoken
     * @param auth
     * @param bucketname
     * @return
     */
    public String getUpToken(Auth auth) {
        return auth.uploadToken(bucketname, null, 3600, new StringMap().put("insertOnly", 1 ));
    }
    
    /***
     * 上传七牛
     * @param key
     * @param uploadManager
     * @param auth
     * @throws IOException
     */
    public String upload(String key,UploadManager uploadManager,Auth auth,byte[] fis) throws IOException {
        //调用put方法上传
        Response res=uploadManager.put(fis, key, getUpToken(auth));
        //打印返回的信息
        System.out.println(res.toString());
        return JSON.toJSONString(res);
    }
    /***
     * 获取上传文件的流
     * @param request
     * @return
     */
    @SuppressWarnings("unchecked")
    public InputStream haveFileNames(HttpServletRequest request){
        String fileName="";
        DiskFileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload upload = new ServletFileUpload(factory);
        upload.setSizeMax(1000000 * 20);
        upload.setHeaderEncoding("UTF-8");
        if(!ServletFileUpload.isMultipartContent(request)){
            //按照传统方式获取数据
            return null;
        }
        InputStream file=null;
        try {
            List<FileItem> list = upload.parseRequest(request);
            for(FileItem item : list){
                //是否为input="type"输入域 
                if(!item.isFormField()){
                    //上传文件的名称和完整路径
                    fileName = item.getName();
                    long size = item.getSize();
                    if ((fileName == null || fileName.equals("")) && size ==0) {
                        continue;
                    }
                    file=item.getInputStream();
                }
            }
        } catch (Exception e){
            e.printStackTrace();
        }
        return file;
    }
    
    /***
     * 生成文件名
     * @return
     */
    @SuppressWarnings("deprecation")
    public static String huoKeyname(){
        Date d= new Date();
        return d.getYear()+"/"+(d.getMonth()<10?"0"+d.getMonth():d.getMonth())+"/"+d.getTime()+".jpg";
    }
    //将文件保存到字节数组中
    public static byte [] inputStreamToByte(InputStream is) throws IOException {
        ByteArrayOutputStream bAOutputStream = new ByteArrayOutputStream();
        int ch;
        while((ch = is.read() ) != -1){
            bAOutputStream.write(ch);
        }
        byte data [] =bAOutputStream.toByteArray();
        bAOutputStream.close();
        return data;
    }
}

 下面是js代码：

$(function() {
		    $(".inp_fileToUpload").on("change", function() {
		    	
		        uploadfile($(this).attr("id"));
		    });
		});
/**
 *图片上传七牛
 *params:file_id  表单ID
 *ajax中的url地址就是你指定的后台地址
 */
var urlName = [];//后台返回的图片url地址
var newnum = 0;

function uploadfile(file_id){

	jQuery.ajaxFileUpload ({
		url:\'\',
		type:\'post\',
		secureuri:false,
		fileElementId:file_id,
		dataType:\'json\', 
		success:function(data,status){
			
			var obj =JSON.parse(data);
			var url = obj.url;
			previewFile(url);
			
		},
		complete: function(xmlHttpRequest) {  
            $("#addIutName").replaceWith("<input type=\"file\" name=\"files\" id=\"file1\"  class=\"inp_fileToUpload\" multiple=\"multiple\"/>");  
            $(".inp_fileToUpload").on("change",function(){ 
            		uploadfile($(this).attr("id")); 
            });  
        },
	});
}
/**
 *动态添加预览图片
 *params:url  图片地址
 */
function previewFile(url){

	$("#addImgName").css("display","block");
	
	var num=$("#addImgName img").size()+1;
	 var name="wyb"+num;
        urlName.push(url);
       
        
      $("").val(url);//将图片地址赋给需要保存图片地址的那个字段""中填写需要保存url路径的字段名
      $("#addImgName").html("<div id=\"dmg"+num+"\" style=\"float: left;position: relative;width: 102px;height: 102px;border: 2px solid #337ab7;\"><span style=\"position: absolute;left: 87px;color: #fff;cursor: pointer;z-index: 10;text-align: center;line-height: initial;width: 16px;height: 15px;background-color: blue;border-radius: 8px;\"  onclick=\"delImgName(this);\">X</span><img src=\""+url+"\" wyb=\""+num+"\" style=\"position:absolute;height:100px;width:100px;\"   alt=\"Image preview...\"/></div>");
     
      
}
/**
 *删除删除图片及地址
 *params:obj  要删除的对象
 */
function  delImgName(obj){
	var wyb=$(obj).parent().find("img").attr("src");
	$(obj).parent().remove();
	removeByValue(urlName,wyb);
}
/**
 *删除数组中制定的值
 *params:arr  数组名称
 *val  要删除的值
 */
function removeByValue(arr,val) {
	alert(url);
  for(var i=0; i<arr.length; i++) {
    if(arr[i] == val) {
      arr.splice(i, 1);
      break;
    }
  }
}

 最后是html代码：

<div class="form">
				<label class="Validform_label">图片:</label>
				<div id="addIutName">
				
					<input type="file" name="files" id="file1"
						onchange="uploadfile(this)" class="inp_fileToUpload"
						multiple="multiple" />
				</div>
				<input id="headPortraits" name="headPortraits" type="hidden"
					 class="inputxt">
				<div class="form" id="addImgName" style="position: relative;display: none;">
				</div>
				<span class="Validform_checktip"></span>
			</div>

 上传时所需在pom.xml中配置一下代码

	<dependency>
			<groupId>com.qiniu</groupId>
			<artifactId>qiniu-java-sdk</artifactId>
			<version>[7.2.0, 7.2.99]</version>
		</dependency>
		<dependency>
			<groupId>org.apache.httpcomponents</groupId>
			<artifactId>httpcore</artifactId>
			<version>4.4.5</version>
		</dependency>
		<dependency>
			<groupId>org.apache.httpcomponents</groupId>
			<artifactId>httpclient</artifactId>
			<version>4.3.1</version>
		</dependency>
		
		<dependency>
			<groupId>com.qiniu</groupId>
			<artifactId>sdk</artifactId>
			<version>6.1.7</version>
		</dependency>

 完事，七牛上传文件就这样就可以搞定了，希望能帮到大家。