Springmvc+uploadify實現檔案上傳
阿新 • • 發佈：2019-02-17
網上看了很多關於檔案上傳的帖子，眾口不一，感覺有點亂，最近正好公司的專案裡用到JQuery的uploadify控制元件做檔案上傳，所以整理下頭緒，搞篇文件出來，供親們分享。
Uploadify控制元件的主要優勢是可以實現批量檔案上傳，並且提供了onSelect（選中檔案）、onUploadSuccess（上傳成功回撥函式）等多個事件監聽函式，可以操控上傳的整個流程。
對uploadify有個簡單的瞭解後，廢話不多說，開始吧...
(由於這次專案中用到的是ssm框架，所以就以springmvc的後臺處理為例)。
一、在工程中匯入uploadify
1、首先，下載uploadify包檔案
Uploadify官網 ： <a>http://www.uploadify.com/</a>
2、解壓包檔案，得到如下結構：
background.jpg 是上傳框的背景圖片
jquery.uploadify.min.js 迷你版的uploadify js檔案，主要功能就靠它了
jquery-1.9.1.js 都懂得，版本沒啥要求
uploadify.css 上傳元件的美化檔案
uploadify.swf 上傳時的動態效果，進度條等
Uploadify-cancel.png 取消上傳按鈕圖片
3、將uplodify資料夾放到webapp下
4、匯入必須的jar包
commons-fileupload-1.3.1.jar
commons-io-2.2.jar
使用maven時pom.xml中新增如下依賴即可：
<dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency>
5、在springmvc.xml檔案中加入multipart 的解析器
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize" value="1024000"></property> <property name="defaultEncoding" value="utf-8"/><!--屬性：編碼--> </bean>
注：這個必須配置，一會在controller裡抓取上傳檔案時要用。否則會報錯。
二、在需要做上傳的頁面中配置
6、在頁頭匯入
7、在頁面中需要上傳附件的位置插入
<div id="uploadfileQueue"></div> //存放選擇檔案的 圖片按鈕的 Div
<input type="file" id="file_upload">
<input type="button" value="上傳"
onclick="javascript:$('#file_upload').uplodify('upload','*')" >
<input type="button" value="取消上傳"
onclick="javascript:$('#file_upload').uplodify('cancel','*')" >
（固定寫法）
8、js中設定
<script type="text/javascript">
$(document).ready(function() {
$("#file_upload").uploadify({
//是否自動上傳 true or false
'auto':false,
//超時時間上傳成功後，將等待伺服器的響應時間。
//在此時間後，若伺服器未響應，則預設為成功(因為已經上傳,等待伺服器的響應) 單位：秒
'successTimeout':99999,
//附帶值 JSON物件資料，將與每個檔案一起傳送至伺服器端。
//如果為動態值，請在onUploadStart()中使用settings()方法更改該JSON值
'formData':{ //可以不寫
'user.username':'',
'user.age':''
},
'onUploadStart': function(file) {
var name=$('#username').val();
var age=$('#age').val();
$("#file_upload").uploadify(
"settings",
"formData",
{'user.username':name,'user.age':age});
},
//flash
'swf': "${pageContext.request.contextPath}/uplodify/uploadify.swf",
//檔案選擇後的容器div的id值
'queueID':'uploadfileQueue',
//將要上傳的檔案物件的名稱 必須與後臺controller中抓取的檔名保持一致
'fileObjName':'pic',
//上傳地址
'uploader':'${pageContext.request.contextPath}/upload/uploadFile',
//瀏覽將要上傳檔案按鈕的背景圖片路徑
'buttonImage':'${pageContext.request.contextPath}/uplodify/background.jpg',
//瀏覽按鈕的寬度
'width':'100',
//瀏覽按鈕的高度
'height':'32',
//在瀏覽視窗底部的檔案型別下拉選單中顯示的文字
'fileTypeDesc':'支援的格式：',
//允許上傳的檔案字尾
'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png', 有哪些？？
/*上傳檔案的大小限制允許上傳檔案的最大 大小。 這個值可以是一個數字或字 符串。
如果它是一個字串，它接受一個單位(B, KB, MB, or GB)。
預設單位為KB您可以將此值設定為0 ，沒有限制,
單個檔案不允許超過所設定的值 如果超過 onSelectError時間被觸發*/
'fileSizeLimit':'100KB',
//允許上傳的檔案的最大數量。當達到或超過這個數字，onSelectError事件被觸發。
'queueSizeLimit' : 3,
//選擇上傳檔案後呼叫
'onSelect' : function(file) {
//alert("123");
},
//返回一個錯誤，選擇檔案的時候觸發
'onSelectError':function(file, errorCode, errorMsg){
switch(errorCode) {
case -100:
alert("上傳的檔案數量已經超出系統限制的"
+$('#file_upload').uploadify('settings','queueSizeLimit')+"個檔案！");
break;
case -110:
alert("檔案 ["+file.name+"] 大小超出系統限制的"
+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");
break;
case -120:
alert("檔案 ["+file.name+"] 大小異常！");
break;
case -130:
alert("檔案 ["+file.name+"] 型別不正確！");
break;
}
},
//上傳到伺服器，伺服器返回相應資訊到data裡
'onUploadSuccess':function(file, data, response){
alert("上傳成功");
},
//當單個檔案上傳出錯時觸發
'onUploadError': function (file, errorCode, errorMsg, errorString) {
alert("上傳失敗");
}
});
});
</script>
9、在controller中，實現上傳
//接收上傳檔案
@RequestMapping(value="uploadFile",method=RequestMethod.POST,produces="text/html;charset=utf-8")
@ResponseBody
public String uploadFile(@RequestParam("pic")CommonsMultipartFile pic,HttpServletRequest req,HttpServletResponse response) throws IOException{
//設定檔案儲存的本地路徑
String filePath = req.getSession().getServletContext().getRealPath("/uploadFiles/");
String fileName = pic.getOriginalFilename();
String fileType = fileName.split("[.]")[1];
//為了避免檔名重複，在檔名前加UUID
String uuid = UUID.randomUUID().toString().replace("-","");
String uuidFileName = uuid + fileName;
File f = new File(filePath+"/"+uuid+"."+fileType);
//將檔案儲存到伺服器
FileUtil.upFile(pic.getInputStream(), uuidFileName, filePath);
return uuidFileName;
}
這個過程中要用到FileUtil工具類：
package com.baidu.util;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.List;
import java.util.zip.ZipEntry;
import java.util.zip.ZipOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class FileUtil {
/**
* 單個檔案上傳
* @param is
* @param fileName
* @param filePath
*/
public static void upFile(InputStream is,String fileName,String filePath){
FileOutputStream fos = null;
BufferedOutputStream bos = null;
BufferedInputStream bis = null;
File file = new File(filePath);
if(!file.exists()){
file.mkdirs();
}
File f = new File(filePath+"/"+fileName);
try {
bis = new BufferedInputStream(is);
fos = new FileOutputStream(f);
bos = new BufferedOutputStream(fos);
byte[] bt = new byte[4096];
int len;
while((len = bis.read(bt))>0){
bos.write(bt, 0, len);
}
} catch (Exception e) {
e.printStackTrace();
}finally {
try {
if(null != bos){
bos.close();
bos = null;}
if(null != fos){
fos.close();
fos= null;
}
if(null != is){
is.close();
is=null;
}
if (null != bis) {
bis.close();
bis = null;
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
10、效果圖
三、總結
1、多檔案的上傳其實是多次呼叫單檔案上傳的方法，我們看到的批量上傳其實是分步執行的，上傳一次呼叫一次單檔案上傳的方法，不要被假象迷惑。
2、上傳成功後可以返回檔案的資訊，在onUploadSuccess函式中可以獲取到，這樣就可以在頁面上設定一個隱藏域存放返回來的值，比如說檔案的id，多檔案的話可以在隱藏域中抓取陣列。然後隨表單提交，更新表資料，這樣就能方便的把上傳檔案的資訊新增到資料庫表中。
3、有的朋友問，上傳的東西在伺服器中，專案重啟就會丟失，怎麼辦，其實這個在真實專案中會做專門處理，不需要考慮。
希望對大家有所幫助。