zoukankan      html  css  js  c++  java
  • 带进度条的上传插件

    官方網址 http://www.uploadify.com/

    我使用的版本是 v3.1 Flash 版

    相關的介紹就不用了吧...總之是個好用的工具,而且提供的參數也很夠用。

    基本使用方式請參考官方文件 http://www.uploadify.com/documentation/ ( 網路上也很多中文的入門教學 )

    我需要調整按鈕樣式 + 警告視窗模式改用 JQuery 的 dialog + 改成中文訊息 

    1.修改按鈕的樣式

    修改下載檔案中的 css 檔案即可,亦可使用官方提供的參數 buttonClass 增加 class 名稱

    因為我還要改 :hover 跟 :active ,所以我是直接改 uploadify 的 css 比較快

    2.修改警告視窗的文字,有兩個方式,先說比較省力的

    [ 方法1 ]

    直接修改下載檔案中的 jquery.uploadify-3.1.js 檔案,把訊息的部份中文化

    ( 夠省力了吧! 還可以把 alert 的呼叫改掉 )

    當然載入的時候就要載入這個 js ,我想應該不會有人改了這個檔案卻載入 min.js 吧.... 

    其中需要注意的是,在參數中不可以設定 overrideEvents : [ 'onDialogClose' ] ,

    因為設了就不會跳警告視窗啦,除非是要自己撰寫事件處理 ( 請看方法2 )

    [ 方法 2  ]

    乖乖的覆寫事件,也可以與 [方法 1] 併用

    1.設定要覆寫的事件 

    使用官方提供的參數 overrideEvents : [ 'onDialogClose' , 'onUploadError' , 'onSelectError' ]

    注意 onDialogClose 設定覆寫後,uploadify 預設的警告視窗都不會跳了唷,

    但是不設定的話,警告視窗會跳兩次 ( 預設警告+自己定義的視窗 )

    參考文件 : http://www.uploadify.com/forum/#/discussion/8282

    其實我測試的結果,好像 overrideEvents 只需要寫 onDialogClose 就可以了....其他沒設定好像也沒差....

    2.修改相關的事件

    onUploadError : function(file, errorCode, errorMsg, errorString) {}

    onSelectError : function(file, errorCode, errorMsg) {}

    由於宣告覆寫 onDialogClose 的關係,若要使用 uploadify 回傳的錯誤訊息,不要使用 this.queueData.errorMsg

    而是用 function 中接收的參數 errorMsg

    ( 好奇的人可以自己試 ,就會知道為什麼了 )

    若不想要使用預設的錯誤訊息,就參考下面的錯誤代碼自己定義吧 

    3.錯誤事件的代號

    其實是看 jquery.uploadify-3.1.js 裡的,

    [ Queue Error ]

    QUEUE_LIMIT_EXCEEDED : -100,

    FILE_EXCEEDS_SIZE_LIMIT : -110,

    ZERO_BYTE_FILE : -120,

    INVALID_FILETYPE : -130

    [ Upload Error ]

    HTTP_ERROR : -200,

    MISSING_UPLOAD_URL : -210,

    IO_ERROR : -220,

    SECURITY_ERROR : -230,

    UPLOAD_LIMIT_EXCEEDED : -240,

    UPLOAD_FAILED : -250,

    SPECIFIED_FILE_ID_NOT_FOUND : -260,

    FILE_VALIDATION_FAILED : -270,

    FILE_CANCELLED : -280,

    UPLOAD_STOPPED : -290

    3. 定義上傳成功的動作

    這個我就不詳細說明了,大家動作都不一樣嘛~

    總之,覆寫 onUploadSuccess : function(file, data, response) {}

     

    一直忘記補上程式碼~我將我寫好的程式碼稍微改一下放上來~

    //uploadify的上傳錯誤動作覆寫
    var uploadify_onUploadError = function(file, errorCode, errorMsg, errorString) {
        if(errorCode==-280||errorCode==-290)    //使用者自己取消的動作不再跳訊息視窗
        {
            return ;    
        }
        var msgText = "上傳失敗
    
    ";
        switch(errorCode)
        {
            case -200:
                msgText += "HTTP 錯誤
    "+errorMsg;
                break;
            case -210:
                msgText += "上傳檔案遺失,請重新操作";
                break;
            case -230:
                msgText += "安全性錯誤
    "+errorMsg;
                break;
            case -240:
                msgText += "上傳檔案數量最多 "+this.settings.uploadLimit+" 個";
                break;
            case -250:
                msgText += "上傳失敗
    "+errorMsg;
                break;
            case -260:
                msgText += "找不到指定檔案的ID,請重新操作";
                break;
            case -270:
                msgText += "參數錯誤";
                break;
            case -280:
                msgText += file.name+"
    檔案上傳被取消";
                break;
            case -290:
                msgText += file.name+"
    檔案上傳被停止";
                break;
            default:    
                msgText += "檔案:"+file.name+"
    錯誤代號:"+errorCode+"
    "+errorMsg+"
    "+errorString;
        }
        alert(msgText);
    }
    //uploadify的選擇檔案錯誤動作覆寫
    var uploadify_onSelectError = function(file, errorCode, errorMsg) {
            var msgText = "上傳失敗
    
    ";
            switch(errorCode)
            {
                case -100:
                    msgText += "單次上傳的檔案最多 "+this.settings.queueSizeLimit+" 個";
                    break;
                case -110:
                    msgText += "檔案大小超過限制( "+this.settings.fileSizeLimit+" )";
                    break;
                case -120:
                    msgText += "檔案大小為 0,不可上傳";
                    break;
                case -130:
                    msgText += "檔案格式不正確,限 "+this.settings.fileTypeExts;
                    break;
                default:    
                    msgText += "錯誤代號:"+errorCode+"
    "+errorMsg;
            }
            alert(msgText);
      }
    //uploadify的檔案上傳成功動作覆寫
    var uploadify_onUploadSuccess = function(file, data, response) {    /*成功動作*/
            alert(file.name + "
    
    " + response + "
    
    " + data);
    }
    
    var phpsid="PHP的session_id()"; /*這段是用php*/
    //上傳插件的參數設定
    var uploadify_imgConfig = {
        width : 80,
        removeTimeout : 1,
        fileObjName  : 'uploadFile',
        fileSizeLimit : "20MB",
        queueSizeLimit: 5,    /*單次上傳最多5個*/
        successTimeout: 60,    /*等待服務器處理文件的時間,默認30s,當超過時,就認為文件已經正確上傳*/
        queueID     : "uploadifyStatusBox",    /*指定進度條都出現在此div中(id="uploadifyStatusBox")*/
        swf : "plugin/uploadify/uploadify.swf",
        uploader : "uploadAction.php",            /*上傳處理*/
        /*覆寫onDialogClose的原因請看 http://www.uploadify.com/forum/#/discussion/8282/alert-box-flash-version/p1 
        設定後,uploadify的警告視窗都不會跳,所以需要跳訊息的都要設定*/
        overrideEvents : ['onDialogClose','onUploadSuccess','onUploadError','onSelectError'],
        onUploadSuccess : uploadify_onUploadSuccess,
        onUploadError : uploadify_onUploadError,
        onSelectError : uploadify_onSelectError,
        buttonText : "新增圖片",
        /*chrome附檔名只能顯示"自定檔",但有生效,另外chrome及ff無法遮蔽捷徑檔*/
        fileTypeExts : "*.gif; *.jpg; *.jpeg; *.png",
        fileTypeDesc:"圖片檔",
        /* chrome跟ie9利用Flash送出後還能抓到session,但ff不行,官網說這是flash版的bug
        官方建議的解決方法 http://www.uploadify.com/documentation/uploadify/using-sessions-with-uploadify/  */
        formData : {"action":"uploadAtt","sid":phpsid}    /*傳遞參數*/
    
    };
    $("#上傳按鈕id").uploadify(uploadify_imgConfig);

    我的程式有用到div (id="uploadifyStatusBox") 集中顯示進度條及 var phpsid = PHP 的 session_id() ,要copy程式碼時,記得要修改這兩處。

  • 相关阅读:
    docker安装dvwa
    新版recon-ng安装模块
    docker多段构建nessus镜像
    docker安装Nessus
    docker快速安装openvas
    pyinstaller打包一些三方库后,报资源不存在
    python解决“failed to execute pyi_rth_pkgres”问题
    Proxmox6.2简单配置
    JavaScript全面学习(koa2.0)/MVC实现登录
    windows下react-native环境配置的那些坑
  • 原文地址:https://www.cnblogs.com/jthb/p/3449272.html
Copyright © 2011-2022 走看看