使用valums刪除上傳列表中的特定文件ajax上傳器

Question

當使用valums ajax上傳器上傳文件時，我們得到文件名和文件大小的文件列表。我希望列表中包含文件名，文件大小和刪除鏈接。所以當用戶點擊刪除時，文件應該退出顯示的列表。 我成功地獲得了每個文件上的刪除鏈接，但由於我的JavaScript知識量少，無法按照我的要求處理。如果任何人都可以提供幫助將會很棒。 這就是我現在做的uptil。

function deleteme(id){ 
//something like this 
    var item = this._getItemByFileId(id);     
    qq.remove(this._find(item)); 
}  

fileTemplate:'<li>' + 
      '<span class="qq-upload-file"></span>' + 
      '<span class="qq-upload-spinner"></span>' + 
      '<span class="qq-upload-size"></span>' + 
      '<a class="qq-upload-cancel" href="#">Cancel</a>' + 
      '<span class="qq-upload-failed-text">Failed</span>' + 
      '<a class="qq-upload-del-text" href="javascript:deleteme(this.id);">Delete</a>' + 
      '</li>', 

在此先感謝。

Answer 1

我正在使用FileUploaderBasic版本並面臨同樣的問題。所以我做了DIY刪除

下面是完整的例子：

var $fub = $('#fine-uploader-basic'), 
            $messages = $('#upload-messages'); 

           // try the basic uploader 

           var uploader = new qq.FileUploaderBasic({ 
             button: $fub[0], 
             action: base_ajax_url + 'upload', 
             debug: true, 
             autoUpload: false, 
             allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'], 
             sizeLimit: 204800, // 200 kB = 200 * 1024 bytes 
             // the method name really should be onSelect 
             onSubmit: function(id, fileName) { 

              var _self = this; 

              var entry = $('<div id="file-' + id + '" class="alert" style="margin: 10px 0 0">' + fileName + ' <span class="qq-upload-cancel close">&times;</span></div>' 
               ).appendTo(
                $messages[0] 
               ).find('.qq-upload-cancel').click(function() { 
                _self._storedFileIds.splice(_self._storedFileIds.indexOf(id) , 1); 
                $($(this).parent()).remove(); 
               return false; 
               }); 

             }, 
             onUpload: function(id, fileName) { 
              $('#file-' + id).addClass('alert-info') 
               .html('<img src="/sites/all/themes/pb_admin/images/loading.gif" alt="Initializing. Please hold."> ' + 
               'Initializing ' + 
               '"' + fileName + '"'); 
             }, 
             onProgress: function(id, fileName, loaded, total) { 
              if (loaded < total) { 
               progress = Math.round(loaded/total * 100) + '% of ' + Math.round(total/1024) + ' kB'; 
               $('#file-' + id).removeClass('alert-info') 
                   .html('<img src="/sites/all/themes/pb_admin/images/loader.gif" alt="In progress. Please hold."> ' + 
                    'Uploading ' + 
                    '"' + fileName + '" ' + 
                    progress); 
              } else { 
               $('#file-' + id).addClass('alert-info') 
                   .html('<img src="/sites/all/themes/pb_admin/images/loader.gif" alt="Saving. Please hold."> ' + 
                    'Saving ' + 
                    '"' + fileName + '"'); 
              } 
             }, 
             onComplete: function(id, fileName, responseJSON) { 
              if (responseJSON.success) { 
               $('#file-' + id).removeClass('alert-info') 
                   .addClass('alert-success') 
                   .html('<i class="icon-ok"></i> ' + 
                    'Successfully saved ' + 
                    '"' + fileName + '"'); 
              } else { 
               $('#file-' + id).removeClass('alert-info') 
                   .addClass('alert-error') 
                   .html('<i class="icon-exclamation-sign"></i> ' + 
                    'Error with ' + 
                    '"' + fileName + '": ' + 
                    responseJSON.error); 
              } 
             } 
            }); 

（這個名字的onsubmit有點可疑......反正）

我試着撥打onCancel方法（但拋出異常未定義）。

然後這個工作 - 通過從_storedFileIds數組中刪除ID。就是這樣。