快捷導(dǎo)航

jquery uploadify如何取消已上傳成功文件

更新時間：2017年02月08日 09:12:17 作者：IT黃三爺

這篇文章主要為大家詳細(xì)介紹了jquery uploadify如何取消已上傳成功文件，具有一定的參考價值，感興趣的小伙伴們可以參考一下

如何使用uploadify進(jìn)行文件上傳,各位都能夠在網(wǎng)上找到,但是需要注意版本號.我這里僅僅說一下,在文件已經(jīng)成功上傳到服務(wù)器之后,如何取消文件的上傳.

我使用的是自動上傳，即將'auto'屬性設(shè)置為true.

1.首先我們要設(shè)置cancelmg屬性,即設(shè)置文件上傳成功后,顯示在文件上的關(guān)閉圖片.這里需要修改對應(yīng)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的地址設(shè)置正確.這時可以看到上傳的文件后會顯示對應(yīng)的取消關(guān)閉圖片.當(dāng)然我們不修改源碼,將圖片放置在img文件夾下也可以.

2.當(dāng)我們使用自動上傳,點擊文件對應(yīng)上的關(guān)閉,這時是不會觸發(fā)'onCancel'事件的,(onCancel事件是針對不自動上傳時進(jìn)行觸發(fā)的)所以我們需要需要綁定對應(yīng)的事件到取消圖片上.

3.當(dāng)每個圖片上傳成功之后,都會觸發(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.首先調(diào)用ajax 傳遞文件名到后臺,后臺刪除對應(yīng)的文件(這個我就不寫了) 
    //2.從后臺返回的為true,表明刪除成功;返回false,表明刪除失敗 
     var deletefileid = cancel.attr("deletefileid"); 
     $("#uploadify").uploadify("cancel",deletefileid);//將上傳隊列中的文件刪除. 
  }); 
} 
}

5.$("#uploadify").uploadify("cancel",deletefileid); 這會調(diào)用uploadify中的cancel方法,但是cancel方法中有一個問題,通過查看源碼,發(fā)現(xiàn)cancel方法并沒有將隊列中的文件刪除,只是在前臺刪除了對應(yīng)的div.這樣就會導(dǎo)致,假設(shè)當(dāng)我上傳文件A,已經(jīng)上傳成功,這時我點擊刪除圖片,取消文件A的上傳,這時前臺A文件消失,但是假如我再次上傳文件A,會提示我已經(jīng)上傳過文件A了,這顯然是有問題的.
其實,uploadify的cancel方法就是針對還沒有上傳到服務(wù)器的文件,這時點擊取消,調(diào)用cancel方法,即cancel方法針對的是還沒有上傳到服務(wù)器的文件.

這時我們需要修改源碼將對應(yīng)需要刪除的文件在隊列中進(jìn)行刪除.

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; 
          /* 添加結(jié)束 */ 
          $('#' + 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(); 
      }); 
    } 
  }); 
 
},

總結(jié)

以上是我針對如何取消已經(jīng)上傳成功的文件的方法.當(dāng)然如果不是自動上傳，那么不用修改uploadify，直接刪除就好。

您可能感興趣的文章: