Javascript 如何控制多个上载到计数5

我想上传图片添加属性，并有一些代码，我可以添加超过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/>")
));
});

$（“#添加更多”）。单击（函数（）{
$（this）.before（$（“”，{id:'filediv'}）.fadeIn（'slow'）.append(
$（“”，{name:'file[]，键入：'file'，id:'file'}），
$（“

”）
));
});

---

“如何停止添加更多”按钮只能使用五个按钮。

在添加输入之前，请检查de div中是否有5个id为filediv的按钮。所以，是的，停止返回

我已经更改并简化了您的代码，因此将在一个div（div#filediv）中添加并计算输入字段

$（“#添加更多”）。单击（函数（）{
if（$（'div#filediv'）.find（'input[type=“file”]”）。长度>=5）
返回；
$（'div#filediv'）。追加(
$（“”，{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++;
});

var totalFilesAdded=0；
$（'add#more'）。在（'click'，function（）上{
如果（添加的文件总数>=5）
返回；
$（'div#filediv'）。追加(
$（“”，{name:'file[]'，type:'file'，id:'mustBeUniquePerPage'}）
);
totalFilesAdded++；
});

---

请在此阅读更多关于为什么更好地使用.on（'click'）与.click（）：

这里最重要的考虑是，您只能真正限制服务器上的文件上载数量。任何Javascript或HTML都不会阻止用户上传超过5个文件。您需要在服务器上设置限制

PHP.ini指令允许您限制通过

POST

请求发送到PHP文件处理上传的文件数量。即使这样，也只会限制单个

POST

请求中上载的文件数量。您还需要在数据库/文件系统中跟踪已上载的数量，并检查这些限制是否被违反

您为

输入

元素（

文件[]

）提供的name属性意味着使用多上传功能，但您的HTML没有

多

属性。你可以有一个多文件上传，用户可以一次上传所有5张图片，也可以保持原样，检查生成了多少

input

字段（我不会为此发布代码，因为另一个答案已经有了）

---

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

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

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

var计数器=0；
$（“#添加更多”）。单击（函数（）{
计数器=计数器+1；
if（counter）您正在创建多达5个div，所有div都使用相同的
id
，这不是合法的HTML，可能会导致JQuery出现问题。您需要将
id
更改为
class
，然后将其更改为合法的。当然，您还需要更改CSS，var count=1；$（'#添加更多'）。单击（函数（）{if（count>=5）{$（this）。在（$）之前，{id:'filediv'}）.fadeIn（'slow'）.append（$（“”，{name:'file[]），type:'file'，id:'file'}），$（“

”）；}否则{alert（“不能添加超过5”）}count++；}@Dharmendra也许这是一个更好的答案，这样我们就可以真正阅读它了。如果它是right@RiggsFolly我添加了一个代码，因为他可以考虑逻辑。的可能重复，除了您应该只在HTML页面中有一个特定的
id
多个相同的
id
之外使JQueryissue@RiggsFolly这是对div的一个附加，不是吗？不，请看。之前，他在添加新输入字段时使用了相同的
{id:'filediv'}
，在基本HTML和添加js中，它应该是
class=“filediv”
var counter = 0;
$('#add_more').click(function() {
counter = counter+1;
if(counter<=5){
$(this).before(...)
}
)};