uploadify使用

.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.當我們使用自動上傳,點擊文件對應上的關閉,這時是不會觸發(fā)’onCancel’事件的,(onCancel事件是針對不自動上傳時進行觸發(fā)的)所以我們需要需要綁定對應的事件到取消圖片上. 3.當每個圖片上傳成功之后,都會觸發(fā)”onUploadSuccess”事件.所以我們將綁定操作寫在onUploadSuccess函數(shù)中. 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方法中有一個問題,通過查看源碼,發(fā)現(xiàn)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,直接刪除就好.