Spring mvc,uploadifive 文件上傳實踐

一、前臺頁面： 引入js和css

<link type="text/css" rel="stylesheet" href="<%=basePath%>static/js/uploadifive/uploadifive.css" />
<script type="text/javascript" src="<%=basePath%>static/js/uploadifive/jquery.min.js"></script>
<script type="text/javascript" src="<%=basePath%>static/js/uploadifive/jquery.uploadifive.min.js"></script>

二、控件初始化：

<script type="text/javascript">
  $(function() {
    $('#file_upload').uploadifive({
      'auto'             : false,
      'buttonClass': 'btn btn-primary',
      'buttonText': "選擇文件",
      'queueID'          : 'uploadqueue',
      'uploadScript'     : '/tools/uploadfiles',
      'onUploadComplete' : function(file, data) { console.log(data); }
    });
  });
</script>

三、body頁面內容：

<div id="uploadqueue">
<input id="file_upload" name="file_upload" type="file" multiple="true">
<a href="javascript:$('#file_upload').uploadifive('upload')">上傳文件</a> |
 <a href="javascript:$('#file_upload').uploadifive('stop')">中止上傳!</a>
</div>

四、後臺Controller:

@RequestMapping(value = "/uploadfiles")
    @ResponseBody
    public JSONArray uploadFile(HttpServletRequest request){

        Calendar calendar=Calendar.getInstance();
        List<String> filePathList = new ArrayList<String>();
        String filePath= SysConstant.UPLOADPATH;
        String filePathUrl=SysConstant.UPLOADPATHURL+"/"+calendar.get(Calendar.YEAR)+calendar.get(Calendar.MONTH);
        filePath=filePath+File.separatorChar+calendar.get(Calendar.YEAR)+calendar.get(Calendar.MONTH);
        try {
            filePathList = FileUploadUtil.uploadFile(request, filePath,filePathUrl);
        } catch (FileNotFoundException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch(Exception ex){
            ex.printStackTrace();
        }

        if(filePathList.size() == 0){
            //return "系統錯誤";
        }
        return JSONArray.fromObject(filePathList);
    }

五、上傳類FileUploadUtil.java

public class FileUploadUtil {
    private static final Logger log = LoggerFactory.getLogger(FileUploadUtil.class);

    public static List<String> uploadFile(HttpServletRequest request, String filePath,String filePathUrl) throws FileNotFoundException {
        List<String> filePathList = new ArrayList<String>();

        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;

        Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
        String fileName = null;
        for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {

            MultipartFile mf = entity.getValue();
            fileName = mf.getOriginalFilename();
            String newfilepath;
            newfilepath = filePath + File.separatorChar + fileName;


            System.out.println("newfilepath=" + newfilepath);
            File dest = new File(filePath);
            if (!dest.exists()) {
                dest.mkdirs();
            }
            File uploadFile = new File(newfilepath);
            if (uploadFile.exists()) {
                uploadFile.delete();
            }
            try {

                log.info("start upload file: " + fileName);
                FileCopyUtils.copy(mf.getBytes(), uploadFile);
            } catch (IOException e) {
                // TODO Auto-generated catch block
                // e.printStackTrace();
                log.info("upload failed. filename: " + fileName + e.getMessage());
                return null;
            }
            filePathList.add(filePathUrl+"/"+fileName);
        }

        return filePathList;
    }
}

六、配置spring-mvc.xml文件：

<!-- 文件上傳表單的視圖解析器 -->
<bean id="multipartResolver"
          class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- set the max upload size100MB -->
        <property name="maxUploadSize">
            <value>104857600</value>
        </property>
        <property name="maxInMemorySize">
            <value>4096</value>
        </property>
    </bean>

七、須要增長的jar文件：

<dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.1</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.4</version>
        </dependency>

總結：此次上傳花了一點時間，遇到幾個小問題。因此留下來供你們參考。