您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)jquery uploadify怎么取消已上傳成功文件,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
如何使用uploadify進(jìn)行文件上傳,各位都能夠在網(wǎng)上找到,但是需要注意版本號(hào).我這里僅僅說一下,在文件已經(jīng)成功上傳到服務(wù)器之后,如何取消文件的上傳.
我使用的是自動(dòng)上傳,即將'auto'屬性設(shè)置為true.
1.首先我們要設(shè)置cancelmg屬性,即設(shè)置文件上傳成功后,顯示在文件上的關(guān)閉圖片.這里需要修改對(duì)應(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è)置正確.這時(shí)可以看到上傳的文件后會(huì)顯示對(duì)應(yīng)的取消關(guān)閉圖片.當(dāng)然我們不修改源碼,將圖片放置在img文件夾下也可以.
2.當(dāng)我們使用自動(dòng)上傳,點(diǎn)擊文件對(duì)應(yīng)上的關(guān)閉,這時(shí)是不會(huì)觸發(fā)'onCancel'事件的,(onCancel事件是針對(duì)不自動(dòng)上傳時(shí)進(jìn)行觸發(fā)的)所以我們需要需要綁定對(duì)應(yīng)的事件到取消圖片上.
3.當(dāng)每個(gè)圖片上傳成功之后,都會(huì)觸發(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 傳遞文件名到后臺(tái),后臺(tái)刪除對(duì)應(yīng)的文件(這個(gè)我就不寫了) //2.從后臺(tái)返回的為true,表明刪除成功;返回false,表明刪除失敗 var deletefileid = cancel.attr("deletefileid"); $("#uploadify").uploadify("cancel",deletefileid);//將上傳隊(duì)列中的文件刪除. }); } }
5.$("#uploadify").uploadify("cancel",deletefileid); 這會(huì)調(diào)用uploadify中的cancel方法,但是cancel方法中有一個(gè)問題,通過查看源碼,發(fā)現(xiàn)cancel方法并沒有將隊(duì)列中的文件刪除,只是在前臺(tái)刪除了對(duì)應(yīng)的div.這樣就會(huì)導(dǎo)致,假設(shè)當(dāng)我上傳文件A,已經(jīng)上傳成功,這時(shí)我點(diǎn)擊刪除圖片,取消文件A的上傳,這時(shí)前臺(tái)A文件消失,但是假如我再次上傳文件A,會(huì)提示我已經(jīng)上傳過文件A了,這顯然是有問題的.
其實(shí),uploadify的cancel方法就是針對(duì)還沒有上傳到服務(wù)器的文件,這時(shí)點(diǎn)擊取消,調(diào)用cancel方法,即cancel方法針對(duì)的是還沒有上傳到服務(wù)器的文件.
這時(shí)我們需要修改源碼將對(duì)應(yīng)需要?jiǎng)h除的文件在隊(duì)列中進(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(); }); } }); },
關(guān)于“jquery uploadify怎么取消已上傳成功文件”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。