jquery控件批量上傳

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

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

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

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

1.下載插件放到項目中

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

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

3.jsp頁面中創建展示DIV和操作按鈕

</pre><pre name="code" class="html"><form>
    <div id="queue"></div><!-上傳隊列展示區-->
    <input id="file_upload" name="file_upload" type="file" multiple="true"><!-批量上傳按鈕-->
</form>

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' : 'myTestFile',//文件對象名稱,用於後臺獲取文件對象時使用,詳見下面的java代碼
        'buttonText' : '批量上傳',//上傳按鈕顯示內容，還有個屬性可以設置按鈕的背景圖片
        'fileSizeLimit' : '100KB',
        'multi' : true,
        'overrideEvents' : [ 'onDialogClose', 'onUploadSuccess', 'onUploadError', 'onSelectError' ],//重寫默認方法
        'onFallback' : function() {//檢測FLASH失敗調用
            alert("您未安裝FLASH控件，無法上傳圖片！請安裝FLASH控件後再試。");
        },
                       //以下方法是對應overrideEvents的重載方法，具體實現是網上找到的一個別的朋友的代碼，
                       //我把這些方法抽到了一個自定義js中，我會在最後面貼出來
                       'onSelect' : uploadify_onSelect,
        'onSelectError' : uploadify_onSelectError,
        'onUploadError' : uploadify_onUploadError,
        'onUploadSuccess' : uploadify_onUploadSuccess
    });
});

5.controller類的方法

<pre name="code" class="html">    @ResponseBody
    @RequestMapping(value = "testFu")

       //這裏的<span style="font-family: Arial, Helvetica, sans-serif;">creativeFile與上面jsp空間中的</span><span style="font-family: Arial, Helvetica, sans-serif;">creativeFile對應</span><span style="font-family: Arial, Helvetica, sans-serif;">
lt;/span>    public String testUpload(MultipartFile creativeFile, HttpServletResponse response) {
    System.out.println(creativeFile.getName());
    System.out.println(creativeFile.getOriginalFilename());
    System.out.println(creativeFile.getSize());
    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 += "上傳的文件數量已經超出系統限制的" + $('#file_upload').uploadify('settings', 'queueSizeLimit') + "個文件！";
        break;
    case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
        msgText += "文件 [" + file.name + "] 大小超出系統限制的" + $('#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 += "參數錯誤";
        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了。 有疑問可以留言咱們一起討論。這個控件很簡單花時間看的話都能弄懂。寫這個文章的目的也是爲了讓大家更快上手，節省寶貴時間