如何控制多个上传计数5

Question

我想上传图像以添加属性，并有一些代码，我可以添加超过5个文件上传。 如何在五点停止上传。 这是我正在使用的示例代码

<form enctype="multipart/form-data" action="" method="post">
<div id="filediv"><input name="file[]" type="file" id="file"/></div><br/>
<input type="button" id="add_more" class="upload" value="Add More Files"/>
<input type="submit" value="Upload File" name="submit" id="upload" class="upload"/>
</form>

并且添加按钮的js代码是

$('#add_more').click(function() {
$(this).before($("<div/>", {id: 'filediv'}).fadeIn('slow').append(
$("<input/>", {name: 'file[]', type: 'file', id: 'file'}),        
$("<br/><br/>")
));
});

我怎么能停止添加更多按钮，只有五个可用。

Answer 1

在添加输入之前，检查de div中是否有5个带有id的文件。 所以是的，停下来回来。

我已经更改并简化了代码，因此输入字段将被添加并计入一个div（div＃filediv）。

$('#add_more').click(function() {
   if ($('div#filediv').find('input[type="file"]').length >= 5)
      return;
   $('div#filediv').append(
      $('<input/>', {name: 'file[]', type: 'file', id: 'mustBeUniquePerPage'})
   );
});

确保每页使用唯一的ID！

更有效的解决方案，更少的DOM和内存密集型：

var totalFilesAdded = 0;
$('#add_more').on('click', function() {
   if (totalFilesAdded >= 5)
      return;
   $('div#filediv').append(
      $('<input/>', {name: 'file[]', type: 'file', id: 'mustBeUniquePerPage'})
   );
   totalFilesAdded++;
});

在这里阅读更多为什么你更好地使用.on（'click'）vs .click（）：.on（'click'）vs .click（ ） 之间的区别

Answer 2

这里最重要的考虑因素是您只能真正限制服务器上的文件上传次数。 没有Javascript或HTML会阻止用户上传超过5个文件。 您需要在服务器上设置限制。

max_file_uploads PHP.ini指令允许您将通过POST请求发送的文件数限制为PHP文件处理上载。 即使这样也只会限制在单个POST请求中上传的文件数量。 您还需要在数据库/文件系统中跟踪已上载的数量，并检查这些限制是否未被破坏。

您为input元素（ file[] ）提供的name属性意味着使用多个上载工具，但您的HTML没有multiple属性。 您可以使用多个文件上传，用户可以一次上传所有5个图像，或者按原样继续操作并检查已生成的input字段数（我不会为此发布代码，因为另一个答案已经存在） 。

无论哪种方式，请记住，您仍然需要检查已经上传了多少文件，因为可以绕过HTML和Javascript中的所有内容。

Answer 3

您可以将全局变量用作计数器并将其初始化为0.单击会增加计数器。 在添加任何属性之前，只需检查count是否小于5。

var counter = 0;
$('#add_more').click(function() {
counter = counter+1;
if(counter<=5){
$(this).before(...)
}
)};