spring mvc 多文件上傳

jQuery Multiple File Upload Plugin（http://www.fyneworks.com/jquery/multiple-file-upload/）

首先我這裏由於項目中使用的是 SpringMVC ，因此這邊後臺我就直接使用 Spring 中的 MultipartFile 中進行處理。

咱們在 multifile 中能夠很容易的發現如何使用，這裏就簡單說說了，首先在頁面上咱們須要有這樣幾行標籤代碼

<!-- 注意這裏的attach名字爲固定，若是要控制上傳的格式，則追加accept="doc|txt|jsp"  最大上傳量maxlength="3" -->  
    <input type="file" name="attach" id="multiFileId" class=" input_txt"/>  
    <div id="multiFileId-list"></div>

而後在該頁面中引入相關的JS和CSS

<script src="./js/multifile/jquery.MetaData.js" type="text/javascript"></script>  
<script src="./js/multifile/jquery.MultiFile.js" type="text/javascript"></script>  
<script src="./js/multifile/jquery.blockUI.js" type="text/javascript"></script>  
<script src="./js/multifile/documentation.js" type="text/javascript"></script>  
<link href="./js/multifile/documentation.css" type="text/css" rel="stylesheet" />

而後經過js和設置剛剛寫入的標籤

<script type="text/javascript">  
    $(function() {  
        //加載多<strong>文件</strong>上傳的JS  
        $('#multiFileId').MultiFile(  
                        {  
                            list : '#multiFileId-list',  
                            STRING : {  
                                remove : '<img src="http://www.fyneworks.com/i/bin.gif" height="16" width="16" alt="x"/>'  
                            }  
                        });  
    });  
</script>

固然，上面的這段 JS 以及上面的 HTML 標籤，咱們能夠根據實際的狀況參考官網上的 Demo 上說明的屬性進行設置。

Ok ，前臺咱們使用這個插件的地方基本就 ok 了，下面咱們須要關心的是後臺咱們如何處理這裏上傳的多文件進行保存。在調研的過程當中我將這一部分簡單的寫了一個工具類。

首先在 Controller 裏接收

@RequestMapping(value="/uploadFile/upload.ac", method = RequestMethod.POST)  
    public String uploadFile(HttpServletRequest request,  
            HttpServletResponse response) {  
        List<MultipartFile> multipartFiles = UploadHelper.getFileSet(request, 1024 * 20, null);  
        String path = "D:" + File.separator;  
        if (multipartFiles.size() == 0) {  
            // TODO 給出提示,不容許沒選擇<strong>文件</strong>點擊上傳  
  
        }  
        for (MultipartFile multipartFile : multipartFiles) {  
            try {  
                String filePath = UploadHelper.uploadFile(multipartFile, path);  
                System.out.println(filePath);  
            } catch (Exception e) {  
                e.printStackTrace();  
            }  
            // 拿到的imgPath就是圖片的相對於contextPath的存儲路徑了  
        }  
        return null;  
    }

package org.elongcom.common;  
  
import java.io.File;  
import java.util.Arrays;  
import java.util.LinkedList;  
import java.util.List;  
import java.util.UUID;  
  
import javax.servlet.http.HttpServletRequest;  
  
import org.springframework.util.FileCopyUtils;  
import org.springframework.web.multipart.MultipartFile;  
import org.springframework.web.multipart.MultipartHttpServletRequest;  
  
/** 
 * @author xdwang 
 *  
 * @create 2012-11-19 下午6:24:03 
 *  
 * @email:xdwangiflytek@gmail.com 
 *  
 * @description 上傳幫助類 
 *  
 */  
public class UploadHelper {  
  
    /** 
     * @descrption 根據HttpServletRequest對象獲取MultipartFile集合 
     * @author xdwang 
     * @create 2012-11-19下午5:11:41 
     * @param request 
     * @param maxLength 
     *            <strong>文件</strong>最大限制 
     * @param allowExtName 
     *            不容許上傳的<strong>文件</strong>擴展名 
     * @return MultipartFile集合 
     */  
    public static List<MultipartFile> getFileSet(HttpServletRequest request,  
            long maxLength, String[] allowExtName) {  
        MultipartHttpServletRequest multipartRequest = null;  
        try {  
            multipartRequest = (MultipartHttpServletRequest) request;  
        } catch (Exception e) {  
            return new LinkedList<MultipartFile>();  
        }  
  
        List<MultipartFile> files = new LinkedList<MultipartFile>();  
        files = multipartRequest.getFiles("attach");  
        // 移除不符合條件的  
        for (int i = 0; i < files.size(); i++) {  
            if (!validateFile(files.get(i), maxLength, allowExtName)) {  
                files.remove(files.get(i));  
                if (files.size() == 0) {  
                    return files;  
                }  
            }  
        }  
        return files;  
    }  
  
    /** 
     * @descrption 保存<strong>文件</strong> 
     * @author xdwang 
     * @create 2012-11-19下午4:17:36 
     * @param file 
     *            MultipartFile對象 
     * @param path 
     *            保存路徑，如「D:\\File\\」 
     * @return 保存的全路徑 如「D:\\File\\2345678.txt」 
     * @throws Exception 
     *             <strong>文件</strong>保存失敗 
     */  
    public static String uploadFile(MultipartFile file, String path)  
            throws Exception {  
  
        String filename = file.getOriginalFilename();  
        String extName = filename.substring(filename.lastIndexOf("."))  
                .toLowerCase();  
        String lastFileName = UUID.randomUUID().toString() + extName;  
        if (!path.endsWith(File.separator)) {  
            path = path + File.separator;  
        }  
        File temp = new File(path);  
        if (!temp.isDirectory()) {  
            temp.mkdir();  
        }  
        // 圖片存儲的全路徑  
        String fileFullPath = path + lastFileName;  
        FileCopyUtils.copy(file.getBytes(), new File(fileFullPath));  
        return fileFullPath;  
    }  
  
    /** 
     * @descrption 驗證<strong>文件</strong>格式，這裏主要驗證後綴名 
     * @author xdwang 
     * @create 2012-11-19下午4:08:12 
     * @param file 
     *            MultipartFile對象 
     * @param maxLength 
     *            <strong>文件</strong>最大限制 
     * @param allowExtName 
     *            不容許上傳的<strong>文件</strong>擴展名 
     * @return <strong>文件</strong>格式是否合法 
     */  
    private static boolean validateFile(MultipartFile file, long maxLength,  
            String[] allowExtName) {  
        if (file.getSize() < 0 || file.getSize() > maxLength)  
            return false;  
        String filename = file.getOriginalFilename();  
  
        // 處理不選擇<strong>文件</strong>點擊上傳時，也會有MultipartFile對象，在此進行過濾  
        if (filename == "") {  
            return false;  
        }  
        String extName = filename.substring(filename.lastIndexOf("."))  
                .toLowerCase();  
        if (allowExtName == null || allowExtName.length == 0  
                || Arrays.binarySearch(allowExtName, extName) != -1) {  
            return true;  
        } else {  
            return false;  
        }  
    }  
  
}

這裏須要多說一點的是，表單提交時若是有文件進行上傳時，須要在表單上設置enctype="multipart/form-data"，不然上面的        multipartRequest = (MultipartHttpServletRequest) request;進行強轉時會報錯。