快捷導(dǎo)航

SpringMVC + jquery.uploadify實(shí)現(xiàn)上傳文件功能

更新時(shí)間：2017年06月06日 09:43:49 作者：garfieldzf

文件上傳是很多項(xiàng)目都會(huì)使用到的功能，SpringMVC當(dāng)然也提供了這個(gè)功能。不過(guò)小編不建議在項(xiàng)目中通過(guò)form表單來(lái)提交文件上傳，這樣做的局限性很大。下面這篇文章主要介紹了利用SpringMVC + jquery.uploadify實(shí)現(xiàn)上傳文件功能的相關(guān)資料，需要的朋友可以參考下。

前言

以前用Asp.net MVC+uploadify上傳文件，最近學(xué)習(xí)SpringMVC，所以就用SpringMVC+uploadify做個(gè)上傳文件的demo。

剛開(kāi)始用form表單的方式提交，在Controller Action中用@RequestParam MultipartFile file就能拿到上傳文件信息。后我直接使用uploadify的方式上傳，接口沒(méi)有做任何調(diào)整，上傳的過(guò)程中報(bào)http400，客戶端的請(qǐng)求不符合接口的要求，表單post提交時(shí)報(bào)文參數(shù)是以Form Data方式，而換成uploadify時(shí)參數(shù)格式則是request payload的方式，所以把接口改寫(xiě)成MultipartServletRequest的方式

開(kāi)發(fā)環(huán)境

SpringMVC4、Uploadify、

上傳文件的話還需要下載 commons-fileupload ，同時(shí)還會(huì)下載common-io、common-logging

項(xiàng)目結(jié)構(gòu)

普通表單上傳

<form action="/User/index" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<input type="submit" value="upload"/>
</form>

@RequestMapping("upload")

 public @ResponseBody String upload(@RequestParam MultipartFile file) throws IOException {

  

 String path =request.getSession().getServletContext().getRealPath("upload");

 File file=new File(path,file.getOriginalFilename());

 

 file.transferTo(file); //保存文件

 

 return "/success"; 

 }

uploadify上傳文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

 <title>Index</title>

 <link href="/2sc/uploadify/uploadify.css" rel="external nofollow" rel="stylesheet" type="text/css" />

 <script src="/2sc/js/jquery-1.4.2.js" type="text/javascript"></script>

 <script src="/2sc/uploadify/jquery.uploadify.js" type="text/javascript"></script>

 <style type="text/css">

 #fileQueue {position: absolute;bottom: 0;right: 0;}

 </style>

</head>

<body>

 spring mvc 上傳文件

 <div id="fileQueue">

 </div>

 <input type="file" name="uploadify" id="uploadify" />

 

<script type="text/javascript">

 $(function () {

 $("#uploadify").uploadify({

  'method':'post',

  //指定swf文件

  'swf': '/2sc/uploadify/uploadify.swf',

  //后臺(tái)處理的頁(yè)面

  'uploader': '/User/upload',

  //按鈕顯示的文字

  'buttonText': '上傳圖片',

  //顯示的高度和寬度，默認(rèn) height 30；width 120

  //'height': 15,

  //'width': 80,

  //上傳文件的類型 默認(rèn)為所有文件 'All Files' ; '*.*'

  //在瀏覽窗口底部的文件類型下拉菜單中顯示的文本

  'fileTypeDesc': 'Image Files',

  //允許上傳的文件后綴

  'fileTypeExts': '*.gif; *.jpg; *.png',

  //發(fā)送給后臺(tái)的其他參數(shù)通過(guò)formData指定

  'formData': { 'someKey': 'someValue'},

  //上傳文件頁(yè)面中，你想要用來(lái)作為文件隊(duì)列的元素的id, 默認(rèn)為false 自動(dòng)生成, 不帶#

  'queueID': 'fileQueue',

  //選擇文件后自動(dòng)上傳

  'auto': true,

  //設(shè)置為true將允許多文件上傳

  'multi': true

 });

 });

</script>

</body>

</html>

接口

@RequestMapping(value = "/upload",method = RequestMethod.POST)

 public @ResponseBody String upload(HttpServletRequest request, HttpServletResponse response){

 

 String path =request.getSession().getServletContext().getRealPath("upload");

 

 MultipartHttpServletRequest multipartHttpServletRequest=(MultipartHttpServletRequest)request;

 

 Map<String,MultipartFile> map = multipartHttpServletRequest.getFileMap();

 

 System.out.println("path:"+path);

 

 File file=new File(path);

 if(!file.exists()){

  file.mkdirs();

 }

 

 try{

 

  for(Map.Entry<String,MultipartFile> entity:map.entrySet()){

  MultipartFile multipartFile=entity.getValue();

  File ff = new File(path,multipartFile.getOriginalFilename());

  multipartFile.transferTo(ff);

  }

 

  return "success";

 }catch (Exception e){

  e.printStackTrace();

  return "error";

 }

 

 

 }