pluplod - 無法從隊列中刪除圖像

Question

我正在敲我的頭，試圖刪除使用Plupload添加的圖像/文件。我可以添加多個圖像，但不能從隊列中刪除。

注意我可以從隊列中刪除最後一張圖片，但如果存在超過1張圖片/文件，我無法刪除超過1張圖片/文件。下面是使用上傳和操作文件的plupload代碼。

var uploader = new plupload.Uploader({ 
runtimes : 'html5,flash,silverlight,html4', 
browse_button : 'pickfiles', // you can pass an id... 
container: document.getElementById('attachment_container'), // ... or DOM Element itself 
url : site_url+"ajax/do_upload", 
multiple_queues : true, 
flash_swf_url : asset_url + 'scripts/Moxie.swf', 
silverlight_xap_url : asset_url + 'scripts/Moxie.xap', 

filters : { 
    max_file_size : '10mb', 
    mime_types: [ 
     {title : "Image files", extensions : "jpg,gif,png,xls,pdf,doc,docx"}, 
     {title : "Zip files", extensions : "zip"} 
    ] 
}, 
// 
init: { 

    PostInit: function() { 

     // document.getElementById('file_list').innerHTML = ''; 

     document.getElementById('uploadfiles').onclick = function() { 
      uploader.start(); 
      return false; 
     }; 
    }, 

    FilesAdded: function(up, files) { 

     var deleteHandle = function(uploaderObject, fileObject) { 
      // document.getElementById("uploadfiles").show();$() 
      return function(event) { 
       event.preventDefault(); 
       uploaderObject.removeFile(fileObject); 
       // $(this).closest("div#" + fileObject.id).remove(); 
       $(this).parent().attr('id', fileObject.id).remove(); 

      }; 
     }; 
     plupload.each(files, function(file) { 
      document.getElementById('file_list').innerHTML += '<div id="' + file.id + '"><input type="hidden" name="files[]" value="'+file.name+'"><input type="hidden" name="file_id[]" value="'+file.id+'">' + file.name + ' (' + plupload.formatSize(file.size) + ')<a href="javascript:void(0)" id="deleteFile' + file.id + '">Remove</a> <b></b></div>'; 
      $('#deleteFile' + file.id).click(deleteHandle(up, file)); 
     }); 
     up.refresh(); 

    }, 
    UploadProgress: function(up, file) { 
     document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>"; 
    }, 
    // QueueChanged: function(up, files) { 
    //  plupload.each(files, function(file) { 
    //   document.getElementById('file_list').innerHTML += '<div id="' + file.id + '"><input type="hidden" name="files[]" value="'+file.name+'"><input type="hidden" name="file_id[]" value="'+file.id+'">' + file.name + ' (' + plupload.formatSize(file.size) + ')<a href="javascript:void(0)" id="deleteFile' + file.id + '">Remove</a> <b></b></div>'; 
    //   $('#deleteFile' + file.id).click(deleteHandle(up, file)); 
    //  }); 
    //  up.refresh(); 

    // }, 

    Error: function(up, err) { 
     document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message)); 
    } 
} 
}); 

    uploader.init(); 

Answer 1

所以沒有人幫助我，我自己想通了，我還不完全知道Plupload。下面是我的解決方案，從隊列中刪除圖像，希望它可以幫助任何其他人尋找同樣的問題。

我在我的問題粘貼代碼是它的同伸出的FilesAdded事件是我改變了一些邏輯，並開始工作，所以我只FilesAdded事件粘貼代碼

FilesAdded: function(up, files) { 
     up.start(); 
     $.each(files, function(i, file) { 
     $('#file_list').append(
      '<div style="padding:1px;" id="' + file.id + '"><a href="javascript:" id="'+file.name+'" class="download_attachment"> ' + 
      file.name + '</a> (' + plupload.formatSize(file.size) + ') <b></b>' + 
      '<a style="float:right;" href="" class="remove fa fa-remove fa-red"></a></div>' 
     ); 
     $('#uploadfiles').css('display', 'initial'); 
     $('#file_list').append('<br/>'); 

     // callback when clicking on remove icon added after files uploaded 
     $('#' + file.id + ' a.remove').first().click(function(e) { 
      e.preventDefault(); 
      up.removeFile(file); 
      $('#' + file.id).next("br").remove(); 
      $('#' + file.id).remove(); 
      if (up.files.length == 0) { 
      $('#uploadfiles').css('display', 'none'); 
      } 
     }); 
// Download uploaded attachment 
      $('#' + file.id + ' a.download_attachment').first().click(function(e) { 
       e.preventDefault(); 
       var name = $(this).attr('id'); 
       window.location=site_url + 'reporting/download_attachment/' + name; 
      }); 

      });