javascript - Plupload 多个队列和限制上传文件的数量

Question

所以，我花了几个小时在网上寻找解决这个问题的方法，我尝试了很多没有用的方法。谁能告诉我如何允许 Plupload 接受多个队列，同时我限制用户可以上传的文件数量？

Answer 1

您可以使用单独的对象通过自定义事件全局监控每个队列中的 FilesAdded 事件：

例如，有两个 div 和 5 个文件的全局限制：

<div id="container1"></div>
<div id="container2"></div>

这将导致以下脚本：

<script language="javascript">
$(document).ready
(
function(){
// monitoring object
var uploadersMonitor =
    {
        uploaders : [], // uploader objects will be store in this array
        maxFiles : 5,  // no more than 5 files globally
        registerUploader : function (upldr){
            if(uploadersMonitor.uploaders.indexOf(upldr)==-1){
                uploadersMonitor.uploaders.push(upldr);
                }
            },
        computeTotalFilesNumber : function(){
            var sum=0;
            for(var i = 0; i<uploadersMonitor.uploaders.length; i++){
                sum+=uploadersMonitor.uploaders[i].files.length;
            }
            return sum;
        },
        processFilesAdded : function(upldr){
            var total = uploadersMonitor.computeTotalFilesNumber();
            if(total> uploadersMonitor.maxFiles)
            {
             alert('No more than '+uploadersMonitor.maxFiles+'total')
                     // remove excess files
             upldr.splice(upldr.files.length-(total-uploadersMonitor.maxFiles)); 
            }
        }
    }

$(document).on("uploaderFilesAdded",
    function(e,upldr){
        uploadersMonitor.registerUploader(upldr);
        uploadersMonitor.processFilesAdded(upldr);
        }
);

function initUploader(item){
    $(item).pluploadQueue({
            runtimes: 'html5,flash,gears,silverlight,browserplus',
            url: '/upload.php',
            max_file_size: '10mb',
                        init: {
                             FilesAdded : function (upldr,files){
                                $(document).trigger("uploaderFilesAdded",upldr);
                                }
                }
        });                 
};

initUploader($('#container1'));
initUploader($('#container2'));
});
</script>

请注意，您可能还需要处理上传者上的 Destroy 事件，以在监控对象中取消注册已销毁的上传者