Question

我正在使用PLUpload一个出色的jquery插件来上传多个文件。效果很好，但是在每个文件上传后，我想在每个文件旁边添加一个删除按钮。

我正在使用Core示例。

这可能吗？如果可以，我该如何实施？

我的代码

  var uploaded = {}

            var uploader = new plupload.Uploader({            
              runtimes : 'html5,flash,silverlight',
                 browse_button : 'pickfiles', // you can pass in id...
                container: document.getElementById('container'), // ... or DOM Element itself

            url : 'https://<?= $my_bucket ?>.s3-<?= $region ?>.amazonaws.com/',

            multipart: true,
            multipart_params: {
                'key': '<?=$filepath;?>${filename}',
                'acl': 'public-read',
                'X-Amz-Credential' : '<?= $access_key; ?>/<?= $short_date; ?>/<?= $region; ?>/s3/aws4_request',
                'X-Amz-Algorithm' : 'AWS4-HMAC-SHA256',
                'X-Amz-Date' : '<?=$iso_date ; ?>',
                'policy' : '<?=base64_encode($policy); ?>',
                'X-Amz-Signature' : '<?=$signature ?>'
            },

            file_data_name: 'file',

            filters : {
                max_file_size : '30mb',
                mime_types: [
                    {title : "Image files", extensions : "jpg,jpeg"},
                    {title : "Audio files", extensions : "mp3,aac"}
                ]
            },

            flash_swf_url : 'Moxie.swf',
            silverlight_xap_url : 'Moxie.xap',


              init: {
        PostInit: function() {
            document.getElementById('filelist').innerHTML = '';

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

        FilesAdded: function(up, files) {
            plupload.each(files, function(file) {
                document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>' ;
            });
        },



        UploadProgress: function(up, file) {
            document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
        },

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

        FileUploaded: function(up, file, info) 

                {
                document.getElementById('filelist').innerHTML += '<button id="' + file.id + '">Delete</button>';
               },
    }
});

uploader.init();

感谢您的任何帮助

Answer 1

您的自我分配任务是一个通用的JavaScript / HTML问题，而不是专门与Plupload相关。你该怎么说？在FilesAdded上拾取文件后-创建一个交互式文件列表，每个文件都有一个“删除”按钮，以便单击该文件时，文件将从要上传的文件列表中删除。 Core Plupload API没有内置此类功能，您必须自己在顶部构建它。或者只是使用已经拥有的Plupload小部件之一。

如果您仍在寻找一种自己做的方法，请在Plupload UI插件here的幕后偷看

PL上传-在文件列表中的上传文件旁边显示一个按钮

1 个答案: