pluplod - 无法从队列中删除图像

Question

我绞尽脑汁，试图删除使用 Plupload 添加的 image/files 。我可以添加多张图片，但无法从队列中删除。

注意我可以从队列中删除最后一张图片，但如果有超过 1 张 image/files，我不能删除超过 1 张 image/file。下面是我用来上传和操作文件的 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;
            });

          });

pluplod - 无法从队列中删除图像

pluplod - can't remove image from queue

php

image-uploading

plupload