最近這兩天專案中用到了uploadify(檔案上傳),在這裡進行一個總結

uploadify

uploadify是一個基於JQuery的檔案上傳外掛,有免費版和收費版兩個版本,其中免費版採用了flash,所以瀏覽器必須要安裝flash外掛.收費版使用HTML5.我這次使用的是免費版.下載地址

uploadify使用

如何使用uploadify進行檔案上傳,各位都能夠在網上找到,但是需要注意版本號.我這裡僅僅說一下,在檔案已經成功上傳到伺服器之後,如何取消檔案的上傳.
我使用的是自動上傳,即將’auto’屬性設定為true.
1.首先我們要設定cancelmg屬性,即設定檔案上傳成功後,顯示在檔案上的關閉圖片.這裡需要修改對應CSS中的程式碼

.uploadify-queue-item .cancel a {
    background: url('../img/uploadify-cancel.png') 0 0 no-repeat;
    float: right;
    height: 16px;
    text-indent: -9999px;
    width: 16px;
}

將這裡url中的uploadify-cancel.png的地址設定正確.這時可以看到上傳的檔案後會顯示對應的取消關閉圖片.當然我們不修改原始碼,將圖片放置在img資料夾下也可以.
2.當我們使用自動上傳,點選檔案對應上的關閉,這時是不會觸發’onCancel’事件的,(onCancel事件是針對不自動上傳時進行觸發的)所以我們需要需要繫結對應的事件到取消圖片上.
3.當每個圖片上傳成功之後,都會觸發”onUploadSuccess”事件.所以我們將繫結操作寫在onUploadSuccess函式中.
4.程式碼如下:

onUploadSuccess:function(file, data, response) {
        var cancel=$('#fileQueue .uploadify-queue-item[id="' + file.Id + '"]').find(".cancel a");
if (cancel) {
    cancel.attr("deletefileid",file.id);
   cancel.click(function () {
       //我的處理邏輯
       //1.首先呼叫ajax 傳遞檔名到後臺,後臺刪除對應的檔案(這個我就不寫了)
       //2.從後臺返回的為true,表明刪除成功;返回false,表明刪除失敗
 

         var deletefileid = cancel.attr("deletefileid");
         $("#uploadify").uploadify("cancel",deletefileid);//將上傳佇列中的檔案刪除.
   });
}
}

5.$("#uploadify").uploadify("cancel",deletefileid); 這會呼叫uploadify中的cancel方法,但是cancel方法中有一個問題,通過檢視原始碼,發現cancel方法並沒有將佇列中的檔案刪除,只是在前臺刪除了對應的div.這樣就會導致,假設當我上傳檔案A,已經上傳成功,這時我點選刪除圖片,取消檔案A的上傳,這時前臺A檔案消失,但是假如我再次上傳檔案A,會提示我已經上傳過檔案A了,這顯然是有問題的.

其實,uploadify的cancel方法就是針對還沒有上傳到伺服器的檔案,這時點選取消,呼叫cancel方法,即cancel方法針對的是還沒有上傳到伺服器的檔案.

這時我們需要修改原始碼將對應需要刪除的檔案在佇列中進行刪除.

        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();
                    });
                }
            });

        },

總結

以上是我針對如何取消已經上傳成功的檔案的方法.當然如果不是自動上傳,那麼不用修改uploadify,直接刪除就好.