文件上传，带缩略图

第一步：七牛云服务器是上对象存储，获取AK,SK,外链默认域名

第二步：工具类QiniuUtil

package com.design.common.util;

import com.qiniu.http.Response;
import com.qiniu.storage.BucketManager;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.UploadManager;
import com.qiniu.util.Auth;
import org.apache.commons.beanutils.BeanUtils;
import org.springframework.web.multipart.MultipartFile;

import java.util.ArrayList;
import java.util.List;
import java.util.UUID;

public class QiniuUtil {

    private static final String ak = 自己七牛上的AK;
    private static final String sk = 自己七牛上的SK;
    // 要上传的空间,填写新建的那个存储空间对象的名称
    private static final String bucket = "ishop";//自己七牛上的对象存储的名称
    private static final String host = "http://自己七牛上的外链默认域名/";

    public static <T> T upload(T t, MultipartFile uploadFile, String propertyName) throws Exception {
        // 获取文件的后缀名
        String name = uploadFile.getOriginalFilename();// 获取上传的文件名
        String hz = name.substring(name.lastIndexOf("."), name.length());
        // 上传要保存的文件名
        String fileName = UUID.randomUUID().toString().replaceAll("-", "") + hz;
        // 密钥配置
        Auth auth = Auth.create(ak, sk);
        String token = auth.uploadToken(bucket);
        // 创建上传对象
        UploadManager uploadManager = new UploadManager(new Configuration());
        uploadManager.put(uploadFile.getBytes(), fileName, token);
        BeanUtils.copyProperty(t, propertyName, host + fileName);
        return t;
    }


    public static boolean  delete(String fileName) throws Exception {
        Auth auth = Auth.create(ak, sk);
        BucketManager bucketManager = new BucketManager(auth, new Configuration());
        Response res = bucketManager.delete(bucket, fileName);
        return res.isOK();
    }

    /**
     * 多文件上传
     * 
     * @param
     * @return
     * @throws Exception
     */
    public static <T> T upload(T t, MultipartFile[] uploadFiles, String propertyName) throws Exception {
        List<String> urls = new ArrayList<String>();
        for(MultipartFile file : uploadFiles){
            upload(t,file,propertyName);
            String url = BeanUtils.getProperty(t, propertyName);
            urls.add(url);
        }
        BeanUtils.copyProperty(t, propertyName, urls.toString());
        return t;
    }
    // http://ozejc4jy5.bkt.clouddn.com/img01.jpg
}

第三步：add.jsp页面

 <div id="file" ></div>
<script>$("#file").load('${ctx}/common/upload');</script>

第四步：controller层,ssm中记得被扫描到 FileUploadController

package com.design.common.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;

@Controller
public class FileUploadController {

    /**
     * 文件上传
     * @return
     */
    @RequestMapping("/common/upload")
    public String index(HttpServletRequest req){
        req.setAttribute("fileUrl", req.getParameter("fileUrl"));
        return "common/file_upload_v1";
    }
}

第五步：file_upload_v1.jsp

<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!-- 显示图片区域 -->
<c:if test="${not empty fileUrl}">
    <div class="thumbnail" id="div-img">
        <img id="upload-img" width="115px" height="130px" src="${fileUrl}"/>
        <div class="caption text-right">
            <a href="#" class="btn btn-danger btn-xs" id="del-img">删除</a>
        </div>
    </div>
</c:if>

<c:if test="${empty fileUrl}">
    <div class="thumbnail" id="div-img" style="display: none">
        <img id="upload-img" width="115px"/>
        <div class="caption text-right">
            <a href="#" class="btn btn-danger btn-xs" id="del-img">删除</a>
        </div>
    </div>
</c:if>

<!-- 上传图片按钮 -->
<button class="btn btn-default" type="button" onclick="$('#input-file').click();">上传图片</button>

<input id="input-file" name="uploadFile" type="file" accept="image/*" style="display: none">
<script>
    $("#input-file").change(function(e) {  
         for (var i = 0; i < e.target.files.length; i++) {  
             var file = e.target.files.item(i);  
             if (!(/^image\/.*$/i.test(file.type))) {  
                //不是图片 就跳出这一次循环 
                 continue;  
             }  
             //实例化FileReader API  
             var freader = new FileReader();  
             freader.readAsDataURL(file);  
             freader.onload = function(e) {
                 $("#upload-img").attr("src", e.target.result);
                 $('#div-img').show();
             };
         }
    });
    //删除图片
    $('#del-img').click(function(){
        $("#upload-img").attr("src", "");
        $('#input-file').val('');
        $('#div-img').hide();
    });
</script>