uploadify多文件上傳

咱們都知道，通常上傳文件的實現都是一個一個上傳文件實現的，或者經過多添加幾個按鈕。有沒有批量上傳呢？確定是有的，那就是Jquery插件uploadify。Uploadify是JQuery的一個上傳插件，實現的效果很是不錯，帶進度顯示。官方提供的實例是php版本的，本文將詳細介紹Uploadify插件的運用。

首先是我本身使用的簡易的js處理文件

var feng_pic = {
                    uploadTotal : 0,
                    uploadLimit : 25,
                    Max : 25,
                    swf:'',
                    uploader:'',
                    uploadify : function () {
                        //文件上傳測試
                        $('#file').uploadify({
                            swf : feng_pic.swf,
                            uploader : feng_pic.uploader,
                            uploadLimit : feng_pic.uploadLimit,
                            width : 120,
                            height : 35,
                            fileTypeDesc : '圖片類型',
                            buttonCursor : 'pointer',
                            buttonText : '上傳圖片',
                            fileTypeExts : '*.jpeg; *.jpg; *.png; *.gif',
                            fileSizeLimit : '2MB',
                            removeCompleted : true,
                            removeTimeout   : 1,
                            overrideEvents : ['onSelectError','onSelect','onDialogClose','onUploadError'],
                            //上傳失敗返回的錯誤
                            onSelectError : function (file, errorCode, errorMsg) {
                                console.log(file, errorCode, errorMsg);
                                switch (errorCode) {
                                    case -100:
                                        bootbox.alert("限制爲"+feng_pic.Max+"張...", function(){});
                                        break;
                                    case -110 :
                                        bootbox.alert('超過2MB...', function(){});
                                        break;
                                    case -120:
                                        bootbox.alert("文件 [" + file.name + "] 大小異常！", function(){});
                                        break;
                                    case -130:
                                        bootbox.alert("文件 [" + file.name + "] 類型不正確！", function(){});
                                        break;
                                }
                            },
                            onUploadStart : function () {
                                if (feng_pic.uploadTotal == feng_pic.Max) {
                                    $('#file').uploadify('stop');
                                    $('#file').uploadify('cancel');
                                    bootbox.alert("限制爲"+feng_pic.Max+"張...", function(){});

                                }

                            },
                            //檢測FLASH失敗調用
                            onFallback: function () {
                                alert("您未安裝FLASH控件，沒法上傳！請安裝FLASH控件後再試。");
                            },
                            //圖片上傳成功回調
                            onUploadSuccess : function (file, data, response) {
                                var allData = eval('(' + data + ')');
                                //自定義寫的圖片上傳顯示html
                                $('.pic_list').append('<div class="pic_content"><span class="remove"></span><span class="text">刪除</span><input type="hidden" name="contractImage[]" value="'+ allData.savename +'"><img src="' + allData.filename + '" class="pic_img"></div>');
                                setTimeout(function () {
                                    feng_pic.hover();
                                    feng_pic.remove();
                                }, 10);
                                feng_pic.uploadTotal++;
                                feng_pic.uploadLimit--;
                                $('.pic_total').text(feng_pic.uploadTotal);
                                $('.pic_limit').text(feng_pic.uploadLimit);

                            }


                        });
                    },
                    hover : function () {
                        var content = $('.pic_content');
                        var len = content.length;
                        $(content[len - 1]).hover(function () {
                            $(this).find('.remove').show();
                            $(this).find('.text').show();
                        }, function () {
                            $(this).find('.remove').hide();
                            $(this).find('.text').hide();
                        });
                    },
                    allHover:function(){
                        $('.pic_content').each(function(){
                                $(this).hover(function () {
                                $(this).find('.remove').show();
                                $(this).find('.text').show();
                            }, function () {
                                $(this).find('.remove').hide();
                                $(this).find('.text').hide();
                            });
                        });
                    },
                    //刪除已上傳文件
                    remove : function () {
                        var remove = $('.pic_content .text');
                        var len = remove.length;
                        $(remove[len - 1]).on('click', function () {
                            $(this).parent().remove();
                            feng_pic.uploadTotal--;
                            feng_pic.uploadLimit++;
                            $('.pic_total').text(feng_pic.uploadTotal);
                            $('.pic_limit').text(feng_pic.uploadLimit);
                            var swfu = $('#file').data('uploadify');
                            var stats = swfu.getStats();
                            stats.successful_uploads--;
                            swfu.setStats(stats);
                        });
                    },
                    allRemove:function(){
                        $('.pic_content .text').each(function(){
                            $(this).on('click', function () {
                                $(this).parent().remove();
                                feng_pic.uploadTotal--;
                                feng_pic.uploadLimit++;
                                $('.pic_total').text(feng_pic.uploadTotal);
                                $('.pic_limit').text(feng_pic.uploadLimit);
                                var swfu = $('#file').data('uploadify');
                                var stats = swfu.getStats();
                                stats.successful_uploads--;
                                swfu.setStats(stats);
                            });
                        });
                    },
                    judgeUploadTotal:function(){
                        var content = $('.pic_content');
                        var len = content.length;
                        feng_pic.uploadTotal=len;
                        feng_pic.uploadLimit=feng_pic.uploadLimit-len;
                        $('.pic_total').text(feng_pic.uploadTotal);
                        $('.pic_limit').text(feng_pic.uploadLimit);
                    },
                    //初始化參數
                    init : function (swf,uploader,uploadLimit) {
                            feng_pic.swf=swf;
                            feng_pic.uploader=uploader;
                            feng_pic.uploadLimit=uploadLimit;
                            feng_pic.Max=uploadLimit;
                            feng_pic.allHover();
                            feng_pic.allRemove();
                            feng_pic.judgeUploadTotal();
                            feng_pic.uploadify();

                    }
            };

其次就是HTML與CSS文件（自定義寫的）

<!--多文件上傳引入-->
<script type="text/javascript" src="{_TEMP_PUBLIC_}/uploadFile/js/jquery.ui.js"></script>
<link rel="stylesheet" href="{_TEMP_PUBLIC_}/uploadFile/uploadify/uploadify.css">
<link rel="stylesheet" href="{_TEMP_PUBLIC_}/uploadFile/css/feng_upload.css">
<script src="{_TEMP_PUBLIC_}/uploadFile/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
<div class="form-group form-md-line-input">
<label class="col-md-2 control-label">多文件上傳</label>
      <div class="col-md-10">
          <div class="postPic">
              <div class="pic_header">
                   <span class="pic_info">共 <span class="pic_total">0</span> 張，還能上傳 <span class="pic_limit">0</span> 張（按住ctrl可選擇多張，每張最大不能超過2MB）</span>
              </div>
                   <div class="pic_list"></div>
                   <input type="file" name="file" id="file">
           </div>
           <script type="text/javascript" src="{_TEMP_PUBLIC_}/uploadFile/js/feng_upload.js"></script>
           <script>
               $(function(){
　　　　　　　　　　　　//初始化參數
                    feng_pic.init('{_TEMP_PUBLIC_}/uploadFile/uploadify/uploadify.swf','/index/uploadPhoto.json',25);
                });
           </script>
       </div>
</div>

最後就是CSS文件，主要是上傳文件之後的顯示樣式

          .postPic{
                   border: 1px solid #ccc;
                   height: auto;
                   margin: 1%;
                   border-radius: 4px;
                   padding: 0;
            }
            .postPic .pic_header{
                    height: 30px;
                    line-height: 30px;
                    color: #666;
                    font-size: 13px;
                    background: rgba(204, 204, 204, 0.21);
                    text-indent: 10px;
                    margin-bottom: 20px;
                    box-shadow: 0px 2px 5px 1px rgba(102, 102, 102, 0.42);
            }
           .postPic .pic_header .pic_info {
                float: left;
            }
            .pic_total{
                    height: 30px;
                    line-height: 30px;
                    color: #666;
                    font-size: 13px;
                    background: #fafafa;
                    text-indent: 10px;
            }
            .pic_content {
                width: 140px;
                height: 140px;
                float: left;
                border: 2px solid #eee;
                margin: 6px 11px;
                overflow: hidden;
                position: relative;
                border-radius: 8px;
                }
            .pic_content img{
                width: 145px;
                height: 170px;
            }
            #file {
                clear: both;
                margin: 0 auto;
                position: relative;
                top: 5px;
            }
            .text {
                    display: none;
                    width: 140px;
                    height: 25px;
                    line-height: 25px;
                    text-align: center;
                    position: absolute;
                    top: 125px;
                    left: 0;
                    z-index: 3;
                    cursor: pointer;
                    color: #fff;
                    font-size: 13px;
                }
            .remove {
                    display: none;
                    width: 140px;
                    height: 25px;
                    background: #000;
                    position: absolute;
                    top: 125px;
                    left: 0;
                    z-index: 2;
                    opacity: 0.7;
                    filter: alpha(opacity=70);
                    cursor: pointer;
                }

樣式圖

已上傳樣式圖

 

給你們看看我給jquery.uploadify.js添加的註釋說明

(function($) {

    // These methods can be called by adding them as the first argument in the uploadify plugin call 這些方法能夠被添加在uploadify插件調用的第一個參數
    var methods = {

        init : function(options, swfUploadOptions) {
            
            return this.each(function() {

                // Create a reference to the jQuery DOM object 建立一個對jQuery DOM對象的引用
                var $this = $(this);

                // Clone the original DOM object 克隆原始DOM對象
                var $clone = $this.clone();

                // Setup the default options 設置默認選項
                var settings = $.extend({
                    // Required Settings 所需的設置
                    id       : $this.attr('id'), // The ID of the DOM object DOM對象的id
                    swf      : 'uploadify.swf',  // The path to the uploadify SWF file 到Uploadify SWF文件的路徑
                    uploader : 'uploadify.php',  // The path to the server-side upload script 服務器端上傳腳本的路徑
                    
                    // Options
                    auto            : true,               // Automatically upload files when added to the queue 自動上傳文件時，添加到隊列
                    buttonClass     : '',                 // A class name to add to the browse button DOM object 要添加到瀏覽按鈕DOM對象的類名
                    buttonCursor    : 'hand',             // The cursor to use with the browse button 光標與瀏覽按鈕一塊兒使用
                    buttonImage     : null,               // (String or null) The path to an image to use for the Flash browse button if not using CSS to style the button （字符串或NULL）的圖像的路徑使用的Flash瀏覽按鈕，若是不使用CSS風格按鈕
                    buttonText      : 'SELECT FILES',     // The text to use for the browse button 用於瀏覽按鈕的文本
                    checkExisting   : false,              // The path to a server-side script that checks for existing files on the server 檢查服務器上現有文件的服務器端腳本的路徑
                    debug           : false,              // Turn on swfUpload debugging mode 打開swfupload調試模式
                    fileObjName     : 'Filedata',         // The name of the file object to use in your server-side script 要在服務器端腳本中使用的文件對象的名稱
                    fileSizeLimit   : 0,                  // The maximum size of an uploadable file in KB (Accepts units B KB MB GB if string, 0 for no limit) 在KB的上傳文件的最大大小（KB MB GB單位接受B若是字符串，0爲不限制）
                    fileTypeDesc    : 'All Files',        // The description for file types in the browse dialog 瀏覽對話框中文件類型的說明
                    fileTypeExts    : '*.*',              // Allowed extensions in the browse dialog (server-side validation should also be used) 容許擴展的瀏覽對話框（服務器端驗證也應使用）
                    height          : 30,                 // The height of the browse button 瀏覽按鈕的高度
                    itemTemplate    : false,              // The template for the file item in the queue 隊列中文件項的模板
                    method          : 'post',             // The method to use when sending files to the server-side upload script 將文件發送到服務器端上傳腳本時使用的方法
                    multi           : true,               // Allow multiple file selection in the browse dialog 容許在瀏覽對話框中選擇多個文件 
                    formData        : {},                 // An object with additional data to send to the server-side upload script with every file upload 帶有附加數據的對象，將每一個文件上傳到服務器端上傳腳本
                    preventCaching  : true,               // Adds a random value to the Flash URL to prevent caching of it (conflicts with existing parameters) 添加一個隨機值的Flash URL，以防止緩存（與現有參數衝突）
                    progressData    : 'percentage',       // ('percentage' or 'speed') Data to show in the queue item during a file upload （百分比或速度）在the item to queue日期顯示在文件上傳
                    queueID         : false,              // The ID of the DOM object to use as a file queue (without the #) 對DOM對象的ID做爲文件隊列（沒有#）
                    queueSizeLimit  : 999,                // The maximum number of files that can be in the queue at one time 一次能夠在隊列中最多的文件數
                    removeCompleted : true,               // Remove queue items from the queue when they are done uploading 在上傳完成時從隊列中移除隊列項
                    removeTimeout   : 3,                  // The delay in seconds before removing a queue item if removeCompleted is set to true 延遲秒移除一個隊列項目若是removecompleted設置爲true以前
                    requeueErrors   : false,              // Keep errored files in the queue and keep trying to upload them 錯誤的文件保持在隊列中，繼續上傳
                    successTimeout  : 30,                 // The number of seconds to wait for Flash to detect the server's response after the file has finished uploading 在文件完成上傳後等待服務器檢測服務器響應的秒數
                    uploadLimit     : 0,                  // The maximum number of files you can upload 您能夠上傳的文件的最大數量
                    width           : 120,                // The width of the browse button 瀏覽按鈕的寬度
                    
                    // Events
                    overrideEvents  : []             // (Array) A list of default event handlers to skip （數組）跳過的默認事件處理程序列表
                    /*
                    onCancel         // Triggered when a file is cancelled from the queue
                    onClearQueue     // Triggered during the 'clear queue' method
                    onDestroy        // Triggered when the uploadify object is destroyed
                    onDialogClose    // Triggered when the browse dialog is closed
                    onDialogOpen     // Triggered when the browse dialog is opened
                    onDisable        // Triggered when the browse button gets disabled
                    onEnable         // Triggered when the browse button gets enabled
                    onFallback       // Triggered is Flash is not detected    
                    onInit           // Triggered when Uploadify is initialized
                    onQueueComplete  // Triggered when all files in the queue have been uploaded
                    onSelectError    // Triggered when an error occurs while selecting a file (file size, queue size limit, etc.)
                    onSelect         // Triggered for each file that is selected
                    onSWFReady       // Triggered when the SWF button is loaded
                    onUploadComplete // Triggered when a file upload completes (success or error)
                    onUploadError    // Triggered when a file upload returns an error
                    onUploadSuccess  // Triggered when a file is uploaded successfully
                    onUploadProgress // Triggered every time a file progress is updated
                    onUploadStart    // Triggered immediately before a file upload starts
                    ==========================================================================
                    兩個/觸發時，一個文件從隊列中取消
                    onclearqueue /觸發「清除隊列的方法中
                    使用/觸發時，Uploadify銷燬對象
                    ondialogclose /瀏覽對話框關閉時觸發
                    ondialogopen /瀏覽對話框打開時觸發
                    ondisable /觸發時，瀏覽按鈕被禁用使/觸發時瀏覽按鈕啓用
                    onfallback /觸發閃光檢測不到
                    OnInit /觸發時，Uploadify被初始化
                    onqueuecomplete /觸發時，隊列中的全部文件已上傳
                    onselecterror /觸發時發生錯誤，選擇一個文件（文件大小，隊列的大小限制，等）
                    onselect /觸發每個文件，選擇
                    onswfready /時觸發按鈕加載SWF
                    onuploadcomplete /觸發文件上傳完成時（成功或錯誤）
                    onuploaderror /觸發時，上傳文件返回一個錯誤
                    onuploadsuccess /觸發時，一個文件上傳成功
                    onuploadprogress /觸發的每一次進步更新文件
                    onuploadstart /觸發當即上傳文件開始以前
                    */
                }, options);

                // Prepare settings for SWFUpload
                var swfUploadSettings = {
                    assume_success_timeout   : settings.successTimeout,
                    button_placeholder_id    : settings.id,
                    button_width             : settings.width,
                    button_height            : settings.height,
                    button_text              : null,
                    button_text_style        : null,
                    button_text_top_padding  : 0,
                    button_text_left_padding : 0,
                    button_action            : (settings.multi ? SWFUpload.BUTTON_ACTION.SELECT_FILES : SWFUpload.BUTTON_ACTION.SELECT_FILE),
                    button_disabled          : false,
                    button_cursor            : (settings.buttonCursor == 'arrow' ? SWFUpload.CURSOR.ARROW : SWFUpload.CURSOR.HAND),
                    button_window_mode       : SWFUpload.WINDOW_MODE.TRANSPARENT,
                    debug                    : settings.debug,                        
                    requeue_on_error         : settings.requeueErrors,
                    file_post_name           : settings.fileObjName,
                    file_size_limit          : settings.fileSizeLimit,
                    file_types               : settings.fileTypeExts,
                    file_types_description   : settings.fileTypeDesc,
                    file_queue_limit         : settings.queueSizeLimit,
                    file_upload_limit        : settings.uploadLimit,
                    flash_url                : settings.swf,                    
                    prevent_swf_caching      : settings.preventCaching,
                    post_params              : settings.formData,
                    upload_url               : settings.uploader,
                    use_query_string         : (settings.method == 'get'),
                    
                    // Event Handlers 
                    file_dialog_complete_handler : handlers.onDialogClose,
                    file_dialog_start_handler    : handlers.onDialogOpen,
                    file_queued_handler          : handlers.onSelect,
                    file_queue_error_handler     : handlers.onSelectError,
                    swfupload_loaded_handler     : settings.onSWFReady,
                    upload_complete_handler      : handlers.onUploadComplete,
                    upload_error_handler         : handlers.onUploadError,
                    upload_progress_handler      : handlers.onUploadProgress,
                    upload_start_handler         : handlers.onUploadStart,
                    upload_success_handler       : handlers.onUploadSuccess
                }
                // Merge the user-defined options with the defaults
                if (swfUploadOptions) {
                    swfUploadSettings = $.extend(swfUploadSettings, swfUploadOptions);
                }
                // Add the user-defined settings to the swfupload object
                swfUploadSettings = $.extend(swfUploadSettings, settings);
                
                // Detect if Flash is available
                var playerVersion  = swfobject.getFlashPlayerVersion();
                var flashInstalled = (playerVersion.major >= 9);

                if (flashInstalled) {
                    // Create the swfUpload instance
                    window['uploadify_' + settings.id] = new SWFUpload(swfUploadSettings);
                    var swfuploadify = window['uploadify_' + settings.id];

                    // Add the SWFUpload object to the elements data object
                    $this.data('uploadify', swfuploadify);
                    
                    // Wrap the instance
                    var $wrapper = $('<div />', {
                        'id'    : settings.id,
                        'class' : 'uploadify',
                        'css'   : {
                                    'height'   : settings.height + 'px',
                                    'width'    : settings.width + 'px'
                                  }
                    });
                    $('#' + swfuploadify.movieName).wrap($wrapper);
                    // Recreate the reference to wrapper
                    $wrapper = $('#' + settings.id);
                    // Add the data object to the wrapper 
                    $wrapper.data('uploadify', swfuploadify);

                    // Create the button
                    var $button = $('<div />', {
                        'id'    : settings.id + '-button',
                        'class' : 'uploadify-button ' + settings.buttonClass
                    });
                    if (settings.buttonImage) {
                        $button.css({
                            'background-image' : "url('" + settings.buttonImage + "')",
                            'text-indent'      : '-9999px'
                        });
                    }
                    $button.html('<span class="uploadify-button-text">' + settings.buttonText + '</span>')
                    .css({
                        'height'      : settings.height + 'px',
                        'line-height' : settings.height + 'px',
                        'width'       : settings.width + 'px'
                    });
                    // Append the button to the wrapper
                    $wrapper.append($button);

                    // Adjust the styles of the movie
                    $('#' + swfuploadify.movieName).css({
                        'position' : 'absolute',
                        'z-index'  : 1
                    });
                    
                    // Create the file queue
                    if (!settings.queueID) {
                        var $queue = $('<div />', {
                            'id'    : settings.id + '-queue',
                            'class' : 'uploadify-queue'
                        });
                        $wrapper.after($queue);
                        swfuploadify.settings.queueID      = settings.id + '-queue';
                        swfuploadify.settings.defaultQueue = true;
                    }
                    
                    // Create some queue related objects and variables
                    swfuploadify.queueData = {
                        files              : {}, // The files in the queue
                        filesSelected      : 0, // The number of files selected in the last select operation
                        filesQueued        : 0, // The number of files added to the queue in the last select operation
                        filesReplaced      : 0, // The number of files replaced in the last select operation
                        filesCancelled     : 0, // The number of files that were cancelled instead of replaced
                        filesErrored       : 0, // The number of files that caused error in the last select operation
                        uploadsSuccessful  : 0, // The number of files that were successfully uploaded
                        uploadsErrored     : 0, // The number of files that returned errors during upload
                        averageSpeed       : 0, // The average speed of the uploads in KB
                        queueLength        : 0, // The number of files in the queue
                        queueSize          : 0, // The size in bytes of the entire queue
                        uploadSize         : 0, // The size in bytes of the upload queue
                        queueBytesUploaded : 0, // The size in bytes that have been uploaded for the current upload queue
                        uploadQueue        : [], // The files currently to be uploaded
                        errorMsg           : 'Some files were not added to the queue:'
                    };

                    // Save references to all the objects
                    swfuploadify.original = $clone;
                    swfuploadify.wrapper  = $wrapper;
                    swfuploadify.button   = $button;
                    swfuploadify.queue    = $queue;

                    // Call the user-defined init event handler
                    if (settings.onInit) settings.onInit.call($this, swfuploadify);

                } else {

                    // Call the fallback function
                    if (settings.onFallback) settings.onFallback.call($this);

                }
            });

        },

        // Stop a file upload and remove it from the queue 
        cancel : function(fileID, supressEvent) {

            var args = arguments;
            this.each(function() {
                // Create a reference to the jQuery DOM object
                var $this        = $(this),
                    swfuploadify = $this.data('uploadify'),
                    settings     = swfuploadify.settings,
                    delay        = -1;

                if (args[0]) {
                    // Clear the queue
                    if (args[0] == '*') {
                        var queueItemCount = swfuploadify.queueData.queueLength;
                        $('#' + settings.queueID).find('.uploadify-queue-item').each(function() {
                            delay++;
                            if (args[1] === true) {
                                swfuploadify.cancelUpload($(this).attr('id'), false);
                            } else {
                                swfuploadify.cancelUpload($(this).attr('id'));
                            }
                            $(this).find('.data').removeClass('data').html(' - Cancelled');
                            $(this).find('.uploadify-progress-bar').remove();
                            $(this).delay(1000 + 100 * delay).fadeOut(500, function() {
                                $(this).remove();
                            });
                        });
                        swfuploadify.queueData.queueSize   = 0;
                        swfuploadify.queueData.queueLength = 0;
                        // Trigger the onClearQueue event
                        if (settings.onClearQueue) settings.onClearQueue.call($this, queueItemCount);
                    } else {
                        for (var n = 0; n < args.length; n++) {
                            swfuploadify.cancelUpload(args[n]);
                            /*添加代碼--刪除隊列*/
                            delete swfuploadify.queueData.files[args[n]];   
                            swfuploadify.queueData.queueLength = swfuploadify.queueData.queueLength - 1; 
                               /*添加結束*/
                            $('#' + args[n]).find('.data').removeClass('data').html(' - Cancelled');
                            $('#' + args[n]).find('.uploadify-progress-bar').remove();
                            $('#' + args[n]).delay(1000 + 100 * n).fadeOut(500, function() {
                                $(this).remove();
                            });
                        }
                    }
                } else {
                    var item = $('#' + settings.queueID).find('.uploadify-queue-item').get(0);
                    $item = $(item);
                    swfuploadify.cancelUpload($item.attr('id'));
                    $item.find('.data').removeClass('data').html(' - Cancelled');
                    $item.find('.uploadify-progress-bar').remove();
                    $item.delay(1000).fadeOut(500, function() {
                        $(this).remove();
                    });
                }
            });

        },

        // Revert the DOM object back to its original state
        destroy : function() {

            this.each(function() {
                // Create a reference to the jQuery DOM object
                var $this        = $(this),
                    swfuploadify = $this.data('uploadify'),
                    settings     = swfuploadify.settings;

                // Destroy the SWF object and 
                swfuploadify.destroy();
                
                // Destroy the queue
                if (settings.defaultQueue) {
                    $('#' + settings.queueID).remove();
                }
                
                // Reload the original DOM element
                $('#' + settings.id).replaceWith(swfuploadify.original);

                // Call the user-defined event handler
                if (settings.onDestroy) settings.onDestroy.call(this);

                delete swfuploadify;
            });

        },

        // Disable the select button
        disable : function(isDisabled) {
            
            this.each(function() {
                // Create a reference to the jQuery DOM object
                var $this        = $(this),
                    swfuploadify = $this.data('uploadify'),
                    settings     = swfuploadify.settings;

                // Call the user-defined event handlers
                if (isDisabled) {
                    swfuploadify.button.addClass('disabled');
                    if (settings.onDisable) settings.onDisable.call(this);
                } else {
                    swfuploadify.button.removeClass('disabled');
                    if (settings.onEnable) settings.onEnable.call(this);
                }

                // Enable/disable the browse button
                swfuploadify.setButtonDisabled(isDisabled);
            });

        },

        // Get or set the settings data
        settings : function(name, value, resetObjects) {

            var args        = arguments;
            var returnValue = value;
            this.each(function() {
                // Create a reference to the jQuery DOM object
                var $this        = $(this),
                    swfuploadify = $this.data('uploadify'),
                    settings     = swfuploadify.settings;

                if (typeof(args[0]) == 'object') {
                    for (var n in value) {
                        setData(n,value[n]);
                    }
                }
                if (args.length === 1) {
                    returnValue =  settings[name];
                } else {
                    switch (name) {
                        case 'uploader':
                            swfuploadify.setUploadURL(value);
                            break;
                        case 'formData':
                            if (!resetObjects) {
                                value = $.extend(settings.formData, value);
                            }
                            swfuploadify.setPostParams(settings.formData);
                            break;
                        case 'method':
                            if (value == 'get') {
                                swfuploadify.setUseQueryString(true);
                            } else {
                                swfuploadify.setUseQueryString(false);
                            }
                            break;
                        case 'fileObjName':
                            swfuploadify.setFilePostName(value);
                            break;
                        case 'fileTypeExts':
                            swfuploadify.setFileTypes(value, settings.fileTypeDesc);
                            break;
                        case 'fileTypeDesc':
                            swfuploadify.setFileTypes(settings.fileTypeExts, value);
                            break;
                        case 'fileSizeLimit':
                            swfuploadify.setFileSizeLimit(value);
                            break;
                        case 'uploadLimit':
                            swfuploadify.setFileUploadLimit(value);
                            break;
                        case 'queueSizeLimit':
                            swfuploadify.setFileQueueLimit(value);
                            break;
                        case 'buttonImage':
                            swfuploadify.button.css('background-image', settingValue);
                            break;
                        case 'buttonCursor':
                            if (value == 'arrow') {
                                swfuploadify.setButtonCursor(SWFUpload.CURSOR.ARROW);
                            } else {
                                swfuploadify.setButtonCursor(SWFUpload.CURSOR.HAND);
                            }
                            break;
                        case 'buttonText':
                            $('#' + settings.id + '-button').find('.uploadify-button-text').html(value);
                            break;
                        case 'width':
                            swfuploadify.setButtonDimensions(value, settings.height);
                            break;
                        case 'height':
                            swfuploadify.setButtonDimensions(settings.width, value);
                            break;
                        case 'multi':
                            if (value) {
                                swfuploadify.setButtonAction(SWFUpload.BUTTON_ACTION.SELECT_FILES);
                            } else {
                                swfuploadify.setButtonAction(SWFUpload.BUTTON_ACTION.SELECT_FILE);
                            }
                            break;
                    }
                    settings[name] = value;
                }
            });
            
            if (args.length === 1) {
                return returnValue;
            }

        },

        // Stop the current uploads and requeue what is in progress
        stop : function() {

            this.each(function() {
                // Create a reference to the jQuery DOM object
                var $this        = $(this),
                    swfuploadify = $this.data('uploadify');

                // Reset the queue information
                swfuploadify.queueData.averageSpeed  = 0;
                swfuploadify.queueData.uploadSize    = 0;
                swfuploadify.queueData.bytesUploaded = 0;
                swfuploadify.queueData.uploadQueue   = [];

                swfuploadify.stopUpload();
            });

        },

        // Start uploading files in the queue
        upload : function() {

            var args = arguments;

            this.each(function() {
                // Create a reference to the jQuery DOM object
                var $this        = $(this),
                    swfuploadify = $this.data('uploadify');

                // Reset the queue information
                swfuploadify.queueData.averageSpeed  = 0;
                swfuploadify.queueData.uploadSize    = 0;
                swfuploadify.queueData.bytesUploaded = 0;
                swfuploadify.queueData.uploadQueue   = [];
                
                // Upload the files
                if (args[0]) {
                    if (args[0] == '*') {
                        swfuploadify.queueData.uploadSize = swfuploadify.queueData.queueSize;
                        swfuploadify.queueData.uploadQueue.push('*');
                        swfuploadify.startUpload();
                    } else {
                        for (var n = 0; n < args.length; n++) {
                            swfuploadify.queueData.uploadSize += swfuploadify.queueData.files[args[n]].size;
                            swfuploadify.queueData.uploadQueue.push(args[n]);
                        }
                        swfuploadify.startUpload(swfuploadify.queueData.uploadQueue.shift());
                    }
                } else {
                    swfuploadify.startUpload();
                }

            });

        }

    }

    // These functions handle all the events that occur with the file uploader
    var handlers = {

        // Triggered when the file dialog is opened
        onDialogOpen : function() {
            // Load the swfupload settings
            var settings = this.settings;

            // Reset some queue info
            this.queueData.errorMsg       = 'Some files were not added to the queue:';
            this.queueData.filesReplaced  = 0;
            this.queueData.filesCancelled = 0;

            // Call the user-defined event handler
            if (settings.onDialogOpen) settings.onDialogOpen.call(this);
        },

        // Triggered when the browse dialog is closed 當瀏覽對話框關閉時引起
        onDialogClose :  function(filesSelected, filesQueued, queueLength) {
            // Load the swfupload settings
            var settings = this.settings;

            // Update the queue information 更新隊列信息
            this.queueData.filesErrored  = filesSelected - filesQueued;
            this.queueData.filesSelected = filesSelected;
            this.queueData.filesQueued   = filesQueued - this.queueData.filesCancelled;
            this.queueData.queueLength   = queueLength;

            // Run the default event handler 運行默認事件處理程序
            if ($.inArray('onDialogClose', settings.overrideEvents) < 0) {
                if (this.queueData.filesErrored > 0) {
                    alert(this.queueData.errorMsg);
                }
            }

            // Call the user-defined event handler 調用自定義事件處理程序
            if (settings.onDialogClose) settings.onDialogClose.call(this, this.queueData);

            // Upload the files if auto is true 上傳文件，若是汽車是真實的
            if (settings.auto) $('#' + settings.id).uploadify('upload', '*');
        },

        // Triggered once for each file added to the queue 爲每一個文件添加到隊列觸發一次
        onSelect : function(file) {
            // Load the swfupload settings
            var settings = this.settings;

            // Check if a file with the same name exists in the queue 檢查隊列中是否存在同名的文件
            var queuedFile = {};
            for (var n in this.queueData.files) {
                queuedFile = this.queueData.files[n];
                if (queuedFile.uploaded != true && queuedFile.name == file.name) {
                    var replaceQueueItem = confirm('The file named "' + file.name + '" is already in the queue.\nDo you want to replace the existing item in the queue?');
                    if (!replaceQueueItem) {
                        this.cancelUpload(file.id);
                        this.queueData.filesCancelled++;
                        return false;
                    } else {
                        $('#' + queuedFile.id).remove();
                        this.cancelUpload(queuedFile.id);
                        this.queueData.filesReplaced++;
                    }
                }
            }

            // Get the size of the file 獲取文件的大小
            var fileSize = Math.round(file.size / 1024);
            var suffix   = 'KB';
            if (fileSize > 1000) {
                fileSize = Math.round(fileSize / 1000);
                suffix   = 'MB';
            }
            var fileSizeParts = fileSize.toString().split('.');
            fileSize = fileSizeParts[0];
            if (fileSizeParts.length > 1) {
                fileSize += '.' + fileSizeParts[1].substr(0,2);
            }
            fileSize += suffix;
            
            // Truncate the filename if it's too long 截斷文件名，若是它太長
            var fileName = file.name;
            if (fileName.length > 25) {
                fileName = fileName.substr(0,25) + '...';
            }

            // Create the file data object 建立文件數據對象
            itemData = {
                'fileID'     : file.id,
                'instanceID' : settings.id,
                'fileName'   : fileName,
                'fileSize'   : fileSize
            }

            // Create the file item template 建立文件項模板
            if (settings.itemTemplate == false) {
                settings.itemTemplate = '<div id="${fileID}" class="uploadify-queue-item">\
                    <div class="cancel">\
                        <a href="javascript:$(\'#${instanceID}\').uploadify(\'cancel\', \'${fileID}\')">X</a>\
                    </div>\
                    <span class="fileName">${fileName} (${fileSize})</span><span class="data"></span>\
                    <div class="uploadify-progress">\
                        <div class="uploadify-progress-bar"><!--Progress Bar--></div>\
                    </div>\
                </div>';
            }

            // Run the default event handler 運行默認事件處理程序
            if ($.inArray('onSelect', settings.overrideEvents) < 0) {
                
                // Replace the item data in the template 替換模板中的項目數據
                itemHTML = settings.itemTemplate;
                for (var d in itemData) {
                    itemHTML = itemHTML.replace(new RegExp('\\$\\{' + d + '\\}', 'g'), itemData[d]);
                }

                // Add the file item to the queue 將文件項添加到隊列中
                $('#' + settings.queueID).append(itemHTML);
            }

            this.queueData.queueSize += file.size;
            this.queueData.files[file.id] = file;

            // Call the user-defined event handler 調用自定義事件處理程序
            if (settings.onSelect) settings.onSelect.apply(this, arguments);
        },

        // Triggered when a file is not added to the queue 當文件未添加到隊列時引起
        onSelectError : function(file, errorCode, errorMsg) {
            // Load the swfupload settings 負荷swfupload設置
            var settings = this.settings;
            // Run the default event handler 運行默認事件處理程序
            if ($.inArray('onSelectError', settings.overrideEvents) < 0) {
                switch(errorCode) {
                    case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
                        if (settings.queueSizeLimit > errorMsg) {
                            this.queueData.errorMsg += '\nThe number of files selected exceeds the remaining upload limit (' + errorMsg + ').';
                        } else {
                            this.queueData.errorMsg += '\nThe number of files selected exceeds the queue size limit (' + settings.queueSizeLimit + ').';
                        }
                        break;
                    case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
                        this.queueData.errorMsg += '\nThe file "' + file.name + '" exceeds the size limit (' + settings.fileSizeLimit + ').';
                        break;
                    case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
                        this.queueData.errorMsg += '\nThe file "' + file.name + '" is empty.';
                        break;
                    case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
                        this.queueData.errorMsg += '\nThe file "' + file.name + '" is not an accepted file type (' + settings.fileTypeDesc + ').';
                        break;
                }
            }
            if (errorCode != SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) {
                delete this.queueData.files[file.id];
            }

            // Call the user-defined event handler 調用自定義事件處理程序
            if (settings.onSelectError) settings.onSelectError.apply(this, arguments);
        },

        // Triggered when all the files in the queue have been processed 當隊列中的全部文件已被處理時觸發
        onQueueComplete : function() {
            if (this.settings.onQueueComplete) this.settings.onQueueComplete.call(this, this.settings.queueData);
        },

        // Triggered when a file upload successfully completes 當文件上載成功完成時引起
        onUploadComplete : function(file) {
            // Load the swfupload settings
            var settings     = this.settings,
                swfuploadify = this;

            // Check if all the files have completed uploading
            var stats = this.getStats();
            this.queueData.queueLength = stats.files_queued;
            if (this.queueData.uploadQueue[0] == '*') {
                if (this.queueData.queueLength > 0) {
                    this.startUpload();
                } else {
                    this.queueData.uploadQueue = [];

                    // Call the user-defined event handler for queue complete
                    if (settings.onQueueComplete) settings.onQueueComplete.call(this, this.queueData);
                }
            } else {
                if (this.queueData.uploadQueue.length > 0) {
                    this.startUpload(this.queueData.uploadQueue.shift());
                } else {
                    this.queueData.uploadQueue = [];

                    // Call the user-defined event handler for queue complete
                    if (settings.onQueueComplete) settings.onQueueComplete.call(this, this.queueData);
                }
            }

            // Call the default event handler
            if ($.inArray('onUploadComplete', settings.overrideEvents) < 0) {
                if (settings.removeCompleted) {
                    switch (file.filestatus) {
                        case SWFUpload.FILE_STATUS.COMPLETE:
                            setTimeout(function() { 
                                if ($('#' + file.id)) {
                                    swfuploadify.queueData.queueSize   -= file.size;
                                    swfuploadify.queueData.queueLength -= 1;
                                    delete swfuploadify.queueData.files[file.id]
                                    $('#' + file.id).fadeOut(500, function() {
                                        $(this).remove();
                                    });
                                }
                            }, settings.removeTimeout * 1000);
                            break;
                        case SWFUpload.FILE_STATUS.ERROR:
                            if (!settings.requeueErrors) {
                                setTimeout(function() {
                                    if ($('#' + file.id)) {
                                        swfuploadify.queueData.queueSize   -= file.size;
                                        swfuploadify.queueData.queueLength -= 1;
                                        delete swfuploadify.queueData.files[file.id];
                                        $('#' + file.id).fadeOut(500, function() {
                                            $(this).remove();
                                        });
                                    }
                                }, settings.removeTimeout * 1000);
                            }
                            break;
                    }
                } else {
                    file.uploaded = true;
                }
            }

            // Call the user-defined event handler
            if (settings.onUploadComplete) settings.onUploadComplete.call(this, file);
        },

        // Triggered when a file upload returns an error 當文件上載返回錯誤時引起
        onUploadError : function(file, errorCode, errorMsg) {
            // Load the swfupload settings
            var settings = this.settings;
            // Set the error string
            var errorString = 'Error';
            switch(errorCode) {
                case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
                    errorString = 'HTTP Error (' + errorMsg + ')';
                    break;
                case SWFUpload.UPLOAD_ERROR.MISSING_UPLOAD_URL:
                    errorString = 'Missing Upload URL';
                    break;
                case SWFUpload.UPLOAD_ERROR.IO_ERROR:
                    errorString = 'IO Error';
                    break;
                case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
                    errorString = 'Security Error';
                    break;
                case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED://上傳的文件數量超過了容許的最大值
                    //alert('The upload limit has been reached (' + errorMsg + ').');
                    errorString = 'Exceeds Upload Limit';
                    break;
                case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
                    errorString = 'Failed';
                    break;
                case SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND:
                    break;
                case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:
                    errorString = 'Validation Error';
                    break;
                case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
                    errorString = 'Cancelled';
                    this.queueData.queueSize   -= file.size;
                    this.queueData.queueLength -= 1;
                    if (file.status == SWFUpload.FILE_STATUS.IN_PROGRESS || $.inArray(file.id, this.queueData.uploadQueue) >= 0) {
                        this.queueData.uploadSize -= file.size;
                    }
                    // Trigger the onCancel event
                    if (settings.onCancel) settings.onCancel.call(this, file);
                    delete this.queueData.files[file.id];
                    break;
                case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
                    errorString = 'Stopped';
                    break;
            }

            // Call the default event handler
            if ($.inArray('onUploadError', settings.overrideEvents) < 0) {
                //上傳被取消了或上傳被終止了
                if (errorCode != SWFUpload.UPLOAD_ERROR.FILE_CANCELLED && errorCode != SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED) {
                    $('#' + file.id).addClass('uploadify-error');
                }

                // Reset the progress bar 重置進度條
                $('#' + file.id).find('.uploadify-progress-bar').css('width','1px');

                // Add the error message to the queue item 將錯誤消息添加到隊列項
                if (errorCode != SWFUpload.UPLOAD_ERROR.SPECIFIED_FILE_ID_NOT_FOUND && file.status != SWFUpload.FILE_STATUS.COMPLETE) {
                    $('#' + file.id).find('.data').html(' - ' + errorString);
                }
            }

            var stats = this.getStats();
            this.queueData.uploadsErrored = stats.upload_errors;

            // Call the user-defined event handler
            if (settings.onUploadError) settings.onUploadError.call(this, file, errorCode, errorMsg, errorString);
        },

        // Triggered periodically during a file upload
        onUploadProgress : function(file, fileBytesLoaded, fileTotalBytes) {
            // Load the swfupload settings
            var settings = this.settings;
            // Setup all the variables
            var timer            = new Date();
            var newTime          = timer.getTime();
            var lapsedTime       = newTime - this.timer;
            if (lapsedTime > 500) {
                this.timer = newTime;
            }
            var lapsedBytes      = fileBytesLoaded - this.bytesLoaded;
            this.bytesLoaded     = fileBytesLoaded;
            var queueBytesLoaded = this.queueData.queueBytesUploaded + fileBytesLoaded;
            var percentage       = Math.round(fileBytesLoaded / fileTotalBytes * 100);
            
            // Calculate the average speed
            var suffix = 'KB/s';
            var mbs = 0;
            var kbs = (lapsedBytes / 1024) / (lapsedTime / 1000);
                kbs = Math.floor(kbs * 10) / 10;
            if (this.queueData.averageSpeed > 0) {
                this.queueData.averageSpeed = Math.floor((this.queueData.averageSpeed + kbs) / 2);
            } else {
                this.queueData.averageSpeed = Math.floor(kbs);
            }
            if (kbs > 1000) {
                mbs = (kbs * .001);
                this.queueData.averageSpeed = Math.floor(mbs);
                suffix = 'MB/s';
            }
            
            // Call the default event handler
            if ($.inArray('onUploadProgress', settings.overrideEvents) < 0) {
                if (settings.progressData == 'percentage') {
                    $('#' + file.id).find('.data').html(' - ' + percentage + '%');
                } else if (settings.progressData == 'speed' && lapsedTime > 500) {
                    $('#' + file.id).find('.data').html(' - ' + this.queueData.averageSpeed + suffix);
                }
                $('#' + file.id).find('.uploadify-progress-bar').css('width', percentage + '%');
            }

            // Call the user-defined event handler
            if (settings.onUploadProgress) settings.onUploadProgress.call(this, file, fileBytesLoaded, fileTotalBytes, queueBytesLoaded, this.queueData.uploadSize);
        },

        // Triggered right before a file is uploaded 在文件上傳前觸發
        onUploadStart : function(file) {
            // Load the swfupload settings
            var settings = this.settings;
            var timer        = new Date();
            this.timer       = timer.getTime();
            this.bytesLoaded = 0;
            if (this.queueData.uploadQueue.length == 0) {
                this.queueData.uploadSize = file.size;
            }
            if (settings.checkExisting) {
                $.ajax({
                    type    : 'POST',
                    async   : false,
                    url     : settings.checkExisting,
                    data    : {filename: file.name},
                    success : function(data) {
                        if (data == 1) {
                            var overwrite = confirm('A file with the name "' + file.name + '" already exists on the server.\nWould you like to replace the existing file?');
                            if (!overwrite) {
                                this.cancelUpload(file.id);
                                $('#' + file.id).remove();
                                if (this.queueData.uploadQueue.length > 0 && this.queueData.queueLength > 0) {
                                    if (this.queueData.uploadQueue[0] == '*') {
                                        this.startUpload();
                                    } else {
                                        this.startUpload(this.queueData.uploadQueue.shift());
                                    }
                                }
                            }
                        }
                    }
                });
            }

            // Call the user-defined event handler 調用自定義事件處理程序
            if (settings.onUploadStart) settings.onUploadStart.call(this, file); 
        },

        // Triggered when a file upload returns a successful code
        onUploadSuccess : function(file, data, response) {
            // Load the swfupload settings
            var settings = this.settings;
            var stats    = this.getStats();
            this.queueData.uploadsSuccessful = stats.successful_uploads;
            this.queueData.queueBytesUploaded += file.size;

            // Call the default event handler
            if ($.inArray('onUploadSuccess', settings.overrideEvents) < 0) {
                $('#' + file.id).find('.data').html(' - Complete');
            }

            // Call the user-defined event handler 調用自定義事件處理程序
            if (settings.onUploadSuccess) settings.onUploadSuccess.call(this, file, data, response); 
        }

    }

    $.fn.uploadify = function(method) {

        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('The method ' + method + ' does not exist in $.uploadify');
        }

    }

})($);