valums ajax uploader를 사용하여 업로드 목록에서 특정 파일 삭제

Question

valums ajax uploader을 사용하여 파일을 업로드하면 파일 이름과 파일 크기가있는 파일 목록이 표시됩니다. 나는 목록이 파일 이름, 파일 크기 및 삭제 링크 파일과 함께 올 싶었어. 따라서 사용자가 삭제를 클릭하면 파일이 목록에서 벗어나야합니다. 나는 각 파일에 대한 삭제 링크를 얻는 데 성공했지만 자바 스크립트 지식이 부족하여 원하는대로 처리 할 수 ​​없었습니다. 아무도 도움이된다면 위대 할 수 있습니다. 이것은 내가 지금 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를 제거하여 작동합니다. 그리고 그게 다야.