jQuery Plupload 限制上传数量

Question

我已经在尝试让这段代码正常工作了一段时间。我想要限制用户最多上传2张图片。

代码中的 var upa = $('.uploader').plupload('getUploader'); 代码行报错，错误信息是 Uncaught TypeError: Object [object Object] has no method 'plupload'。

    var maxfiles=2;
    $('.uploader').each(function(){
        var $uploader = $(this);
        $uploader.pluploadQueue($.extend({
            runtimes: 'html5,flash,html4',
            url : '../admin/extras/upload.php',
            max_file_size : '2mb',
            chunk_size : '2mb',
            unique_names : true,                
            filters : [
                {title : "Image files", extensions : "jpg"}
            ],
            resize : {width : 800, height : 600, quality : 90},
            flash_swf_url : 'js/mylibs/forms/uploader/plupload.flash.swf',
            init : {
                FilesAdded: function(up, files) {
                    plupload.each(files, function(file) {
                        if (up.files.length > maxfiles) {
                            up.removeFile(file);
                        }
                        var upa = $('.uploader').plupload('getUploader');
                        var i = 0;
                        while (i<=upa.files.length) {
                            ultimo = upa.files.length;
                            if (ultimo > 1) {
                                if (i > 0) {
                                    ultimo2 = ultimo - 1;
                                    ii = i-1;
                                    if (ultimo2 != ii) {
                                        if (up.files[ultimo - 1].name == upa.files[i-1].name) {
                                            up.removeFile(file);
                                        }
                                    }
                                }
                            }
                            i++;
                        }
                    });
                    if (up.files.length >= maxfiles) {
                        $('#uploader_browse').hide("slow");
                    }
                },
                FilesRemoved: function(up, files) {
                    if (up.files.length < maxfiles) {
                        $('#uploader_browse').fadeIn("slow");
                    }
                }
            }
        }));
        $uploader.find('.plupload_button').addClass('button grey btn');
        $uploader.find('.plupload_add').addClass('icon-plus');
        $uploader.find('.plupload_start').addClass('icon-ok');
    });

当我上传图片时，会出现错误。我不知道缺少了什么，但如果你能帮忙解决这个问题，将不胜感激。

- Douglas Cottrell

Answer 1

我不清楚您在while (i<=upa.files.length) {代码块中想要实现什么。看起来您的页面上有几个上传器，但我无法理解您的想法。

无论如何，我猜这应该可以解决问题，限制单个上传器最多上传2个文件。

FilesAdded: function(up, files) {
                    var maxfiles = 2;
                    if(up.files.length > maxfiles )
                     {
                        up.splice(maxfiles);
                        alert('no more than '+maxfiles + ' file(s)');
                     }
                    if (up.files.length === maxfiles) {
                        $('#uploader_browse').hide("slow"); // provided there is only one #uploader_browse on page
                    }
                },

希望这能有所帮助

- jbl

---

我是一个 PHP 程序员，不是 JavaScript 程序员。最近开始接触 js 和 jQuery。我从他们的论坛上获取了这段代码。这次编辑很完美，感谢你的建议。 - Douglas Cottrell

Answer 2

好的，jbl的回答很棒。我稍微调整了一下你的解决方案，使其更加通用，并在需要时重新出现“添加文件”按钮。

uploader.bind('FilesAdded', function(up, files) {
  if (up.files.length >= up.settings.max_files) {
    up.splice(up.settings.max_files);
    $(up.settings.browse_button).hide();
  }
});

uploader.bind('FilesRemoved', function(up, files) {
  if (up.files.length < up.settings.max_files) {
    $(up.settings.browse_button).show();
  }
});

max_files 是 pluploadQueue 设置的一部分。

$("#uploadBox").pluploadQueue({
  ...
  max_files: 2,
  ...
});

- Stephan van Eijkelenburg

---

up.settings.browse_button 包含浏览按钮的 ID。我不得不添加一个 ID 选择器才能使它工作。因此，请使用 $('#' + up.settings.browse_button).hide();。 - anfuerer