SpringMVC與uploadify結合進行上傳

uploadify是一個第三方js插件，支持多文件上傳，擁有較為強大的上傳功能

1、uploadify實現

下載其flash版本

http://www.uploadify.com/ 

解壓后將其內容區分后倒入

將jquery.uploadify.min.js、uploadify.css、uploadify.swf、uploadify-cancel.png導入到項目中，注意路徑，路徑不對可能導致取消圖片的顯示失敗

在頁面中引入jquery與 jquery.uploadify.min.js，css

<script type="text/javascript" src="${pageContext.request.contextPath}/statics/js/jquery.js"></script>
<link href="${pageContext.request.contextPath}/statics/js/uploadify/uploadify.css" rel="stylesheet"
      type="text/css"/>
<script src="${pageContext.request.contextPath}/statics/js/uploadify/jquery.uploadify.js"
        type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/statics/js/uploadify/jquery.uploadify.min.js"
        type="text/javascript"></script>

初始化頁面並使用

   
   
   
           

    
    
    
            
 $(function () {
    
    
    
            
 $("#uploadify").uploadify({
    
    
    
            
 //指定swf文件
    
    
    
            
 'swf': '${pageContext.request.contextPath}/statics/js/uploadify/uploadify.swf',
    
    
    
            
 //后台處理的頁面
    
    
    
            
 'uploader': '${pageContext.request.contextPath}/background/questionResolveUpload',
    
    
    
            

    
    
    
            
 //按鈕顯示的文字
    
    
    
            
 'buttonText': '選擇文件',
    
    
    
            
 //顯示的高度和寬度，默認 height 30；width 120
    
    
    
            
 //'height': 15,
    
    
    
            
 //'width': 80,
    
    
    
            
 //上傳文件的類型 默認為所有文件 'All Files' ; '*.*'
    
    
    
            
 //在瀏覽窗口底部的文件類型下拉菜單中顯示的文本
    
    
    
            
 'fileTypeDesc': 'ALL Files',
    
    
    
            
// 'fileTypeDesc': 'ALL Files',
    
    
    
            
 //允許上傳的文件后綴
    
    
    
            
// 'fileTypeExts': '*.gif; *.jpg; *.png',
    
    
    
            
 //上傳文件頁面中，你想要用來作為文件隊列的元素的id, 默認為false 自動生成, 不帶#
    
    
    
            
 //'queueID': 'fileQueue',
    
    
    
            
 //選擇文件后自動上傳
    
    
    
            
 queueSizeLimit: 999,
    
    
    
            
 'auto': false,
    
    
    
            
 //設置為true將允許多文件上傳
    
    
    
            
 'multi': true,
    
    
    
            
 "onUploadSuccess": function (file, data, response) {
    
    
    
            
// alert('The file ' + file.name
    
    
    
            
// + ' was successfully uploaded with a response of '
    
    
    
            
// + response + ':' + data);
    
    
    
            
 dataJson = eval("(" + data + ")");
    
    
    
            
// 上傳后消息回復
    
    
    
            
 resolveResult(dataJson.messageContent, file.name);
    
    
    
            
 },
    
    
    
            
 "onUploadError": function (file, errorCode, errorMsg,
    
    
    
            
 errorString) {
    
    
    
            
// 插件出現錯誤時的問題
    
    
    
            
 alert('The file ' + file.name
    
    
    
            
 + ' could not be uploaded: ' + errorString);
    
    
    
            
 },
    
    
    
            
 "onSelectError": function () {
    
    
    
            
 alert('The file ' + file.name
    
    
    
            
 + ' returned an error and was not added to the queue.');
    
    
    
            
 },
    
    
    
            
 'onUploadStart': function () {
    
    
    
            
 $('#uploadify').uploadify('settings', 'formData', {
    
    
    
            
 "competition": $('#competition').val()
    
    
    
            
 });
    
    
    
            
 }
    
    
    
            
 });
    
    
    
            
 });
   
   
   
           

請注意如果想要動態傳輸參數的話，請在onUploadStart方法中書寫，而不是在配置的時候書寫

controller：

   
   
   
           

    
    
    
            
 public MessageCarrier uploadifyUpload(HttpServletRequest request, String path) {
    
    
    
            
//解析文件
    
    
    
            
 RequestToMultipartFile requestToMultipartFile = new RequestToMultipartFile();
    
    
    
            
 MultipartFile multipartFile = requestToMultipartFile.transformRequest(request);
    
    
    
            
//解析文件結束
    
    
    
            
 MessageCarrier messageCarrier = upload(multipartFile, path);
    
    
    
            
 return messageCarrier;
    
    
    
            
 }
   
   
   
           

直接使用request進行接收后解析即可

其余參數則使用

   
   
   
           

    
    
    
            
request.getParameter("competition")
   
   
   
           

來解析即可

當uploadify進行多個文件上傳的時候會多次向后台服務器發送請求，所以我們只需要按照單一文件解析即可

附 屬性詳解  來源：  http://blog.csdn.net/xuzheng_java/article/details/41143769

屬性	默認值	說明
auto	true	設置為true，當選擇文件后就可以直接上傳，為false需要點擊上傳按鈕才上傳。
buttonClass	empty String	按鈕樣式，默認為空字符串。
buttonCursor	‘hand’	鼠標指針懸停在按鈕上的樣式。
buttonImage	null;	瀏覽按鈕的圖片路徑。
buttonText	‘SELECT FILES’	瀏覽按鈕的文本。3
checkExisting	false	文件上傳重復性檢查程序，檢查即將上傳的文件在服務器端是否已經存在，存在返回1，不存在返回0。
debug	false	如果設置為true，則表示啟用SWFUpload的調試模式。
fileObjName	'‘Filedata’	文件上傳對象的名稱，如果命名為the_files,PHP程序可以用$_FILES['the_files']來處理上傳的文件對象。
fileSizeLimit	0	上傳文件的大小限制，如果為整數型，則表示以KB為單位的大小，如果是字符串，則可以使用(B、KB、MB、GB)為單位，比如2MB，如果設置為0則表示無限制。
fileTypeDesc	All Files	這個屬性值必須設置fileTypeExts屬性后才有效，用來設置選擇文件對話框中的提示文本，如果設置fileTypeDesc為：請選擇rar doc pdf文件等。
fileTypeExts	*.*	設置可以選擇的文件的類型，格式如：*.doc;*.pdf;*.rar。
formData		JSON格式上傳每個文件的同時提交到服務器的額外數據，可在onUploadStart事件中使用settings方法動態設置。
height	30	設置瀏覽按鈕的高度，默認值。
itemTemplate	false	用於設置上傳隊列的HTML模板，可以使用以下標簽：instanceID-Uploadify實例的ID，fileID隊列中此文件的ID，或者理解為此任務的ID，fileName文件的名稱，fileSize當前上傳的文件大小
method	Post	提交方式Post或Get。
multi	true	設置為true時可以上傳多個文件。
overrideEvents		設置哪些事件可以被重寫，JSON格式，如:overrideEvents:['onUploadProgress']
preventCaching	true	如果為true，則每次上傳文件時自動加上一串隨機字符串參數，防止URL緩存影響上傳結果。
progressData	'percentage'	設置上傳進度顯示方式，percentage顯示上傳百分比，speed顯示上傳速度。
queueID	false	設置上傳隊列容器DOM元素的ID,如果為false則自動生成一個隊列容器。
queueSizeLimit	999	隊列最多顯示的任務數量，如果選擇的文件數量超過此限制，將會發出onSelectError事件。此項並非最大文件上傳數量，如果要限制最大上傳文件數量，應設置uploadLimit。
removeCompleted	true	是否自動將已完成任務從隊列中刪除，如果設置為false則會一直保留此任務顯示。
removeTimeout	3	如果設置了任務完成后自動從隊列中刪除，則可以規定從完成到被移除的時間間隔。
requeueErrors	false	如果設置為true，則單個任務上傳失敗后將返回錯誤，並重新加入任務隊列上傳。

successTimeout	30	文件上傳成功后，服務端返回成功標志，此項設置返回結果的超時時間。
swf	‘uploadify.swf’	uploadify.swf文件的相對路徑。
uploader	uploadify.php/uploadify.action	后台處理程序的相對路徑。
uploadLimit	999	最大上傳文件數量，如果達到或者超出限制將會觸發onUploadError事件。
width	120	設置文件瀏覽按鈕的寬度。

代碼有高亮格式版本： http://fromwiz.com/share/s/3cTmX51TMQ-b2QTact03UPg83jorac2VJQcH23-ZmX1a3TSs 

附件列表