【问题标题】:Plupload - Restrict to only one filePlupload - 仅限于一个文件
【发布时间】:2011-12-18 22:19:00
【问题描述】:

我在 plupload API 文档中没有看到关于将上传的文件数量限制为任意数量,甚至 1 个的选项。

文档失败?或功能失败?如果它不存在,如果有人需要,我会努力实现它..

【问题讨论】:

    标签: javascript plupload


    【解决方案1】:

    这是一个功能失败。我围绕 jQuery API 做了一个包装器,这就是我所做的让它为我工作的方法。我的代码执行了一些其他业务逻辑,但它应该足以让您开始设置。

    基本上,绑定到FilesAdded 事件并在上传器对象上调用removeFile(如果文件太多)。我想我添加了 50 毫秒超时,因为它给我带来了文件尚不存在的问题。

    uploader.bind('FilesAdded', function (up, files) {
        var i = up.files.length,
            maxCountError = false;
    
        plupload.each(files, function (file) {
    
            if(uploader.settings.max_file_count && i >= uploader.settings.max_file_count){
                maxCountError = true;
                setTimeout(function(){ up.removeFile(file); }, 50);
            }else{
                // Code to add pending file details, if you want
            }
    
            i++;
        });
    
        if(maxCountError){
            // Too many files uploaded, do something
        }
    
    });
    

    max_file_count 是我在创建 pluploader 实例时添加的内容。


    编辑:我实际上必须为此做两种不同的方法。以上将只允许一个人上传一定数量的文件(否则会产生错误)。

    此 sn-p 以类似的方式工作 - 但会删除现有文件并仅上传最新的:

    uploader.bind('FilesAdded', function (up, files) {
        var fileCount = up.files.length,
            i = 0,
            ids = $.map(up.files, function (item) { return item.id; });
    
        for (i = 0; i < fileCount; i++) {
            uploader.removeFile(uploader.getFile(ids[i]));
        }
    
        // Do something with file details
    });
    

    【讨论】:

    • 正如我在对另一个答案的评论中提到的,似乎 max_file_count 已添加到 jQuery UI 小部件中。这仍然不适用于我的应用程序,因为我想要一个人们可以上传 X 个文件的存储桶(因此它需要考虑存储桶中现有的上传文件)
    • 感谢您提供一种无需分叉 JS 即可工作的方法;)
    • 第二种方式删除了我所有的文件,s.th。没有文件可以使用。仅为i &lt; (fileCount - 1) 运行循环仅保留最近添加的文件。
    【解决方案2】:

    其他方法:

     $(document).ready(function () {
        var uploader = new plupload.Uploader({
            ...
            multi_selection: false,
           ....
         });
    

    问候

    【讨论】:

    • 显然不能用于拖放...(在当前版本中)
    【解决方案3】:

    基于 Jonathon Bolster 的第二个答案,我编写了这个更简单的 sn-p 来限制上传到最后选择的文件:

    uploader.bind('FilesAdded', function(up, files) {
        while (up.files.length > 1) {
            up.removeFile(up.files[0]);
        }
    });
    

    【讨论】:

    • 这似乎在错误的地方触发(在添加之前),至少对于 html5 前端。触发此回调后添加新文件。这导致限制为 2 个文件,而不是一个。
    • (用零 setTimeout 固定以附加到事件循环的末尾。)
    • 这也不适用于拖放上传,因为您一次可以添加两个以上的文件。
    • 这应该是 up.files.length>0 因为这会在文件实际添加到队列之前触发。即第一次长度为0,第二次为1。你想删除它然后
    【解决方案4】:

    您可以使用此max_file_count: 5,其中 5 是最大上传数。

    【讨论】:

    • 这不起作用。 max_file_count 不是 plupload 中的标准设置
    • 我已经添加了我当前使用的代码签出!是的,它不在网站上的示例中。
    • 否则你可以参考这个问题plupload.com/punbb/viewtopic.php?pid=5102
    • 啊哈-我的立场是正确的。似乎 jQuery UI 小部件已实现 max_file_count (github.com/moxiecode/plupload/blob/master/examples/jquery/…)。另外,请注意添加代码或任何东西都应该通过编辑你的答案来完成(除非它是一个完全不同的答案)
    • 如果您限制为一个文件,您可能还需要:'multi_selection : false, // 在“打开文件”对话框中关闭多文件选择'
    【解决方案5】:

    为什么不直接

        if (files.length > 1) uploader.splice(1, files.length - 1);
    

    【讨论】:

      【解决方案6】:

      试试这个。对我来说效果很好。

      uploader.bind('FilesAdded', function(up, files) {
      
      if(uploader.files.length > 1)
      {
          uploader.removeFile(uploader.files[0]);
          uploader.refresh();// must refresh for flash runtime
      }
      

      。 . .恢复

      想法是测试当前上传器对象中的 num 个文件。如果长度大于 1,则只需使用方法uploader.removeFile。请注意,参数是 files[0],它不是文件 id,而是完整的文件对象。

      ({id:"p17bqh1v4dp42gdf1gan75p16tp3", name:"gnome-globe.png", size:48456, loaded:0, percent:0, status:1})
      

      最好的问候!

      【讨论】:

        【解决方案7】:

        现在您可以通过将 multi_selection 选项设置为 false

        来禁用多选

        就这样

        var uploader = new plupload.Uploader({
            runtimes : 'html5,flash',
            browse_button : 'button_id',
            multi_selection:false,  //disable multi-selection
        ...
        

        官方文档在这里:http://www.plupload.com/documentation.php

        【讨论】:

          【解决方案8】:
              FilesAdded: function(up, files) {
                  up.files.splice(0,up.files.length-1);
              },
              multi_selection: false,
          

          使用up.files,只需filesfiles 将始终包含我们从文件浏览器中选择的单个项目。 up.files 是我们需要缩小到最后选择的文件的实际列表。

          【讨论】:

            【解决方案9】:

            只允许上传一个文件:

            uploader.bind('FilesAdded', function(up, files) {
                $.each(files, function(i, file) {
                    if(uploader.files.length!=1){uploader.removeFile(file); return;}
                });
            });
            

            允许一次选择一个文件:

            uploader.bind('FilesAdded', function(up, files) {
                $.each(files, function(i, file) {
                    if(i){up.removeFile(file); return;}
                });
            });
            

            允许一次上传一个文件:

            uploader.bind('FilesAdded', function(up, files) {
                $.each(files, function(i, file) {
                    if(uploader.files.length!=1){uploader.removeFile(file); return;}
                });
            });
            uploader.bind('FileUploaded', function(up, file,response) {
                up.removeFile(file);
            });
            

            【讨论】:

              【解决方案10】:

              我意识到这个问题已经得到解答,但我采用的解决方案是只使用 QueueChanged 回调:

              QueueChanged: function(uploader) {
                  // Called when queue is changed by adding or removing files
                  //log('[QueueChanged]');
                  if(uploader.files.length > 1) {
                      uploader.files.splice(0, (parseInt(uploader.files.length) - 1));
                  }
              }
              

              使用此代码,它只保留最后选择的文件(以防他们再次选择的原因是因为他们选择了错误的文件)。

              【讨论】:

                【解决方案11】:

                如果您想使用自定义上传器,并且一次上传一个文件,则不自动上传,并让最后添加的文件成为新文件。

                uploader.bind('FilesAdded', function(up, files) {
                    // Clear the HTML
                    $('#plupload-files').html('');
                
                    // Plup does not offer before file added event
                    if (up.files.length > 1) {
                        up.splice(0, up.files.length);
                        up.addFile(files[0])
                        return;
                    }
                
                    // $.each(files, function(){....
                }
                

                我们拼接整个数组,因为 plup 已经将所有文件添加到队列中,如果您像接受的答案一样拼接队列,您实际上将在每次用户尝试添加文件时添加一个文件,如果他们尝试添加一个新文件文件单独它会将旧文件保留在文件数组中的 pos[0] 处,

                然后我们添加他们尝试添加的文件的第一个文件。这样,队列中只有一个文件,并且始终是他们尝试添加的最后一组文件中的第一个文件。

                即。

                拖入plupload 'file1.jpg', 'file2.jpg', 'file3.jpg'

                清空整个队列,加回'file1.jpg'

                拖入plupload 'file4.jpg', 'file5.jpg', 'file6.jpg'

                清空整个队列,添加回'file4.jpg'

                拖入plupload 'file99.jpg'

                清空整个队列,添加回'file99.jpg'

                如果您一次只想上传一个文件,这允许您管理自定义插件。如前所述,其他答案只能使用一次,或者自动开始上传。

                【讨论】:

                  【解决方案12】:

                  在上传之前直接删除不需要的文件:

                  $('uploadfiles').onclick = function()
                              {
                                  while (uploader.files.length > 1)
                                  {
                                          uploader.removeFile(uploader.files[0]);
                                  }
                  
                                  uploader.start();
                                  return false;
                              };
                  

                  【讨论】:

                    【解决方案13】:

                    在尝试了每种解决方案后,我想出了最简单的方法——这似乎可行。

                    我正在使用核心 api,并且我将 multi_selection 设置为 false。然后,在选择(添加)第一个文件后,我插入到 FilesAdded 事件中的第二行代码隐藏了浏览链接。我认为这不能用 jquery 小部件来完成,而且我还发现,除非上传链接覆盖浏览链接所在的位置,否则它仍然存在。

                    uploader.bind('FilesAdded', function(up, files) {
                    //line below hides button
                    document.getElementById("browse").style.display = "none";
                    
                    var html = '';
                    plupload.each(files, function(file) {
                    html += '<li id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></li>';
                    });
                    document.getElementById('filelist').innerHTML += html;
                    

                    });

                    【讨论】:

                      猜你喜欢
                      • 2014-07-27
                      • 1970-01-01
                      • 2011-11-15
                      • 2013-11-21
                      • 1970-01-01
                      • 1970-01-01
                      • 1970-01-01
                      • 1970-01-01
                      • 1970-01-01
                      相关资源
                      最近更新 更多