人比較懶? 實用為主 不怎么排版了

先放上Uploadify的官網鏈接:http://www.uploadify.com/? -->里面可以看到PHP的示例,屬性說明,以及控件下載地址。分flash版(免費)和html5版(收費)。

官網上可以看到效果演示。

另外在網上找到了一份Uploadify3.2的中文API文檔，可以在我上傳的資源里面下載。

下面就是一個基于springMVC的文件上傳示例，看起來可能比文檔更直觀一些···

1.下載插件放到項目中

2.在jsp頁面中引入以下JS和CSS

3.jsp頁面中創(chuàng)建展示DIV和操作按鈕

4.編輯js代碼

$(document).ready(function() {

$("#file_upload").uploadify({

'swf' : '${ctxStatic}/uploadify/geo_fileUpload.swf',//控件flash文件位置

//后臺處理的請求(也就是action請求路徑)，后面追加了jsessionid，用來標示使用當前session(默認是打開新的session，會導致存在session校驗的請求中產生302錯誤)

'uploader' : '${ctx}/testFu;jsessionid=${pageContext.session.id}',

'queueID' : 'queue',//與下面HTML的div.id對應

'width' : '100',//按鈕寬度

'height' : '32',//按鈕高度

'fileTypeDesc' : '指定類型文件',

'fileTypeExts' : '*.jpg;*.png', //控制可上傳文件的擴展名，啟用本項時需同時聲明fileDesc

'fileObjName' : '"uploadify"',

'buttonText' : '批量上傳',//上傳按鈕顯示內容，還有個屬性可以設置按鈕的背景圖片

'fileSizeLimit' : '100KB',

'multi' : true,

'overrideEvents' : [ 'onDialogClose', 'onUploadSuccess', 'onUploadError', 'onSelectError' ],//重寫默認方法

'onFallback' : function() {//檢測FLASH失敗調用

alert("您未安裝FLASH控件，無法上傳圖片！請安裝FLASH控件后再試。");

},

//以下方法是對應overrideEvents的重載方法，具體實現(xiàn)是網上找到的一個別的朋友的代碼，

//我把這些方法抽到了一個自定義js中，我會在最后面貼出來

'onSelect' : uploadify_onSelect,

'onSelectError' : uploadify_onSelectError,

'onUploadError' : uploadify_onUploadError,

'onUploadSuccess' : uploadify_onUploadSuccess

});

});

5.controller類的方法

@ResponseBody

@RequestMapping(value = "testFu")

public String testUpload(MultipartRequest request, HttpServletResponse response) {

//我試了一下雖然每個文件是分別上傳的 但此處還要用Map來獲取

Map fileMap = request.getFileMap();

for(String key : fileMap.keySet()){

MultipartFile mFile = fileMap.get(key);

mFile.getName();

mFile.getOriginalFilename();

mFile.getSize();

//業(yè)務操作代碼 begin

//業(yè)務操作代碼 end

}

return "測試測試";//返回給前臺的提示信息

}

6.附錄摘自網上的重載方法列表，我做了一些改動使之更實用(感謝網絡無名高手)

var uploadify_onSelectError = function(file, errorCode, errorMsg) {

var msgText = "上傳失敗\n";

switch (errorCode) {

case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:

// this.queueData.errorMsg = "每次最多上傳 " +

// this.settings.queueSizeLimit + "個文件";

msgText += "上傳的文件數(shù)量已經超出系統(tǒng)限制的" + $('#file_upload').uploadify('settings', 'queueSizeLimit') + "個文件！";

break;

case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:

msgText += "文件 [" + file.name + "] 大小超出系統(tǒng)限制的" + $('#file_upload').uploadify('settings', 'fileSizeLimit') + "大小！";

break;

case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:

msgText += "文件大小為0";

break;

case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:

msgText += "文件格式不正確，僅限 " + this.settings.fileTypeExts;

break;

default:

msgText += "錯誤代碼：" + errorCode + "\n" + errorMsg;

}

alert(msgText);

};

var uploadify_onUploadError = function(file, errorCode, errorMsg, errorString) {

// 手工取消不彈出提示

if (errorCode == SWFUpload.UPLOAD_ERROR.FILE_CANCELLED || errorCode == SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED) {

return;

}

var msgText = "上傳失敗\n";

switch (errorCode) {

case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:

msgText += "HTTP 錯誤\n" + errorMsg;

break;

case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:

msgText += "上傳文件丟失，請重新上傳";

break;

case SWFUpload.UPLOAD_ERROR.IO_ERROR:

msgText += "IO錯誤";

break;

case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:

msgText += "安全性錯誤\n" + errorMsg;

break;

case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:

msgText += "每次最多上傳 " + this.settings.uploadLimit + "個";

break;

case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:

msgText += errorMsg;

break;

case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND:

msgText += "找不到指定文件，請重新操作";

break;

case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:

msgText += "參數(shù)錯誤";

break;

default:

msgText += "文件:" + file.name + "\n錯誤碼:" + errorCode + "\n" + errorMsg + "\n" + errorString;

}

alert(msgText);

}

var uploadify_onSelect = function() {

};

var uploadify_onUploadSuccess = function(file, data, response) {

alert("保存每個文件上傳后臺返回的相關信息,在onQueueComplete方法中展示");

};

var uploadify_onQueueComplete = function(){

alert("全部完成-->并展示提示信息");

}

到此Uploadify的文件批量上傳就OK了。 有疑問可以留言咱們一起討論。這個控件很簡單花時間看的話都能弄懂。寫這個文章的目的也是為了讓大家更快上手，節(jié)省寶貴時間

原文：http://blog.csdn.net/goodboylllll/article/details/40889013

總結

以上是生活随笔為你收集整理的java uploadify 3.2_jquery文件批量上传控件Uploadify3.2(java springMVC)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。