人比較懶? 實(shí)用為主 不怎么排版了

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

官網(wǎng)上可以看到效果演示。

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

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

1.下載插件放到項(xiàng)目中

2.在jsp頁(yè)面中引入以下JS和CSS

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

4.編輯js代碼

$(document).ready(function() {

$("#file_upload").uploadify({

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

//后臺(tái)處理的請(qǐng)求(也就是action請(qǐng)求路徑)，后面追加了jsessionid，用來(lái)標(biāo)示使用當(dāng)前session(默認(rèn)是打開(kāi)新的session，會(huì)導(dǎo)致存在session校驗(yàn)的請(qǐng)求中產(chǎn)生302錯(cuò)誤)

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

'queueID' : 'queue',//與下面HTML的div.id對(duì)應(yīng)

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

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

'fileTypeDesc' : '指定類(lèi)型文件',

'fileTypeExts' : '*.jpg;*.png', //控制可上傳文件的擴(kuò)展名，啟用本項(xiàng)時(shí)需同時(shí)聲明fileDesc

'fileObjName' : '"uploadify"',

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

'fileSizeLimit' : '100KB',

'multi' : true,

'overrideEvents' : [ 'onDialogClose', 'onUploadSuccess', 'onUploadError', 'onSelectError' ],//重寫(xiě)默認(rèn)方法

'onFallback' : function() {//檢測(cè)FLASH失敗調(diào)用

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

},

//以下方法是對(duì)應(yīng)overrideEvents的重載方法，具體實(shí)現(xiàn)是網(wǎng)上找到的一個(gè)別的朋友的代碼，

//我把這些方法抽到了一個(gè)自定義js中，我會(huì)在最后面貼出來(lái)

'onSelect' : uploadify_onSelect,

'onSelectError' : uploadify_onSelectError,

'onUploadError' : uploadify_onUploadError,

'onUploadSuccess' : uploadify_onUploadSuccess

});

});

5.controller類(lèi)的方法

@ResponseBody

@RequestMapping(value = "testFu")

public String testUpload(MultipartRequest request, HttpServletResponse response) {

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

Map fileMap = request.getFileMap();

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

MultipartFile mFile = fileMap.get(key);

mFile.getName();

mFile.getOriginalFilename();

mFile.getSize();

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

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

}

return "測(cè)試測(cè)試";//返回給前臺(tái)的提示信息

}

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

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 + "個(gè)文件";

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

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 += "錯(cuò)誤代碼：" + 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 錯(cuò)誤\n" + errorMsg;

break;

case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:

msgText += "上傳文件丟失，請(qǐng)重新上傳";

break;

case SWFUpload.UPLOAD_ERROR.IO_ERROR:

msgText += "IO錯(cuò)誤";

break;

case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:

msgText += "安全性錯(cuò)誤\n" + errorMsg;

break;

case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:

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

break;

case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:

msgText += errorMsg;

break;

case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND:

msgText += "找不到指定文件，請(qǐng)重新操作";

break;

case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:

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

break;

default:

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

}

alert(msgText);

}

var uploadify_onSelect = function() {

};

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

alert("保存每個(gè)文件上傳后臺(tái)返回的相關(guān)信息,在onQueueComplete方法中展示");

};

var uploadify_onQueueComplete = function(){

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

}

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

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。