jquery uploadify插件教程

插件：Jquery Uploadify文件上傳插件  http://www.uploadify.com/

後端處理語言：java

 

使用前引入uploadify js和樣式

<link rel="stylesheet" href="../css/uploadify.css" />

<script src="../js/uploadify/jquery.uploadify.min.js"></script>

前端代碼：

            <div class="control-group">
                <label class="control-label">文檔</label>
                <div class="controls">
                    <div id="queue"></div>
                    <input id="file_upload" name="fileAttach" type="file"  >
                </div>
            </div>
            <div class="form-actions">
                <button type="button" class="btn btn-primary" onclick="startUpload()" >
                上 傳
                </button>
            </div>

upload JS：

//doc參考 http://www.uploadify.com/documentation/
   $(function() {
        $("#file_upload").uploadify({
            height          : 25,
            swf             : '../js/uploadify/uploadify.swf',
           //後端處理action
            uploader        : '../doct/uploadify',
            width           : 120,
            //fileTypeExts  : '*.doc; *.ppt;*.xls;',
            fileObjName     : 'fileAttach', //文件上傳name
            auto            : false, //文件選中後是否自動提交
              multi    : false, //是否多選
           //文件上傳完畢後消息框是否自動消失，默認true
            removeCompleted : false,  
            //文件上傳完畢後消息框消失延遲時間,默認3 僅removeCompleted=true生效
            //removeTimeout   : 3,
            //文件上傳大小限制           
            //fileSizeLimit : 999, 
            //文件隊列傳輸完畢 queueDate [uploadsSuccessful,uploadsErrored]
            onQueueComplete : function(queueData){
                            alert('success:'+queueData.uploadsSuccessful+'fail:'+queueData.uploadsErrored)
            },
             //單文件傳輸成功           
            onUploadSuccess:function(file, data, response){                                         
                //alert('singleSuccess,fileName:'+file.name);
            },
           //單文件傳輸失敗
            onUploadError : function(file, errorCode, errorMsg, errorString) {                      
                //eg:The file mozjs.dll errorCode -200 errorCode -200 errorMsg 302 errorString HTTP Error (302)
                alert('The file ' + file.name + ' errorCode ' + errorCode+ ' errorCode ' + errorCode+ ' errorMsg ' + errorMsg+ ' errorString ' + errorString);
            },
            //按鈕顯示名稱
            buttonText    : "chose files..."                                                         
        });
    });
    //點擊按鈕觸發上傳
    function startUpload(){
        $('#file_upload').uploadify('upload','*');
    }

java後端接收參數：

    public void uploadify(TFileInfo fileInfo, HttpServletResponse response) {
        try {
            PrintWriter out = response.getWriter();
            out.write("test");
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

 

注意事項：

uploadify的事件只是對原有事件的補充，並非覆蓋。若是須要覆蓋事項能夠添加屬性overrideEvents 。而消息提示的彈出都是經過onDialogClose觸發，若是想改變就必須覆蓋onDialogClose，具體可查源碼。