Jquery 表格上每个字段的照片限制

我有一个表单，用户点击“添加新颜色”，自动添加一个新字段。见下文：

每个字段将限制为6张照片。但代码同时计算所有字段，而不是单独计算。如何单独计算每个字段而不是同时计算所有字段

HTML

<table width="100%" >
    <tr class="linhas">
    <td>
<table class="table table-bordered">
<tr>
    <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Código de cores</td>
    <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Cor Básica</td>
    <td style="text-align: center; background-color: #367FA9; color: #FFF; font-weight: bold">Grades</td>
</tr>
<tr>
<td style="text-align: center; width: 40%"><input type="text" class="form-control" placeholder="Referência"></td>
<td style="text-align: center; width: 30%">
<select name="CoresBasicas" class="form-control">
<?php echo $metodos->comboCores($key); ?>
</select>       
</td>
<td style="text-align: left;">
<select name="Grades[]" class="form-control grades" style="width: 100%">
    <?php echo $metodos->comboGrades($key); ?>
</select>
</td>
</tr>
<tr>
<td colspan="3">    
<div class="mostrarGrades"></div>
</td>
</tr>
<tr>
<td colspan="3" class="text-left">
<label for='files' class="upload">Selecionar fotos <i class="fa fa-plus-circle fa-lg" aria-hidden="true"></i></label>
<input id='files' type='file' name="Fotos[]" multiple>
</td>
</table>
</td>
<td  style="padding: 5px"><button type="button" class="removerCampo btn btn-danger" title="Remover linha"><i class="fa fa-minus-square" aria-hidden="true"></i> Remover</button></td>
</tr>              
<tr><td colspan="3" class="text-right">
<button type="button" class="adicionarCampo btn btn-success" title="Adicionar item"><i class="fa fa-plus-square" aria-hidden="true"></i> Incluir nova cor</button>
</div>
</td></tr>
</table>    

Código de cores
巴西柯尔
分数
福托斯精选酒店
搬运工
包括新科

JQuery

<script>
var count=0;
function handleFileSelect(evt) {
        var $fileUpload = $("input#files[type='file']");
        count=count+parseInt($fileUpload.get(0).files.length);

        if (parseInt($fileUpload.get(0).files.length) > 6 || count > 7) {
            alert("O máximo é de até 6 fotos");
            count=count-parseInt($fileUpload.get(0).files.length);
            evt.preventDefault();
            evt.stopPropagation();
            return false;
        }
        var files = evt.target.files;
        for (var i = 0, f; f = files[i]; i++) {
               if (!f.type.match('image.*')) {
                     continue;
               }
            var reader = new FileReader();
            reader.onload = (function (theFile) {
                return function (e) {
                    var span = document.createElement('span');
                    span.innerHTML = ['<input type="radio" name="FotoPrincipal[]" id="principal" value="'+escape(theFile.name)+'"><img class="img-thumbnail" src="', e.target.result, '" title="', escape(theFile.name), '" style="width: 30%"/><span class="remove_img_preview"></span>'].join('');
                    document.getElementById('list').insertBefore(span, null);
                };
            })(f);
            reader.readAsDataURL(f);
        }
    }
    $('#files').change(function(evt){
        handleFileSelect(evt);
    });
    $('#list').on('click', '.remove_img_preview',function () {
        $(this).parent('span').remove();
      count--;

            if(count==0){
        $('#files').val(null);
      }
    });
    $('#list').on('click', '#principal',function () {
        document.getElementById("botao").disabled = "";
        document.getElementById("texto").style.display = "none";
    });
</script>

var计数=0；
功能手柄文件选择（evt）{
var$fileUpload=$（“输入#文件[type='file']）；
count=count+parseInt（$fileUpload.get（0.files.length））；
if（parseInt（$fileUpload.get（0.files.length）>6 | | count>7）{
警报（“奥玛西莫埃德阿泰弗托斯6号”）；
count=count parseInt（$fileUpload.get（0.files.length））；
evt.preventDefault（）；
evt.stopPropagation（）；
返回false；
}
var files=evt.target.files；
for（var i=0，f；f=files[i]；i++）{
如果（！f.type.match（'image.*'））{
继续；
}
var reader=new FileReader（）；
reader.onload=（函数（文件）{
返回函数（e）{
var span=document.createElement（'span'）；
span.innerHTML=[''）.join（''）；
document.getElementById（'list'）.insertBefore（span，null）；
};
})（f） )；
reader.readAsDataURL（f）；
}
}
$（“#文件”）.change（函数（evt）{
handleFileSelect（evt）；
});
$（“#列表”）。在（'单击'，'上。删除预览'，函数（）{
$（this.parent（'span'）.remove（）；
计数--；
如果（计数=0）{
$（'#files'）.val（null）；
}
});
$（'#list'）。在（'click'，'#principal'，函数（）{
document.getElementById（“botao”）.disabled=“”；
document.getElementById（“texto”）.style.display=“无”；
});

---

对不起，我说的是英语。

解决方法是在

添加新颜色时

随机生成唯一id，然后您调用哪个唯一id。对于文件输入，您有相同的id，即：

id='files'

而不是使用类。它必须是唯一的，如

id='files\u xjfuehf'

，因为多个

添加新颜色

，所以每个文件唯一id

var$fileUpload

可以使用单击函数从文件上传输入的位置获取id