Javascript 限制上载图像的数量

我有这个JavaScript代码，它允许用户上传和预览他们上传的图像

正在通过具有指定尺寸的表格网格预览图像

我的问题：

如何编辑JavaScript以限制用户上传超过9幅图像

注意：稍后将在服务器端实现相同的限制。由于用户能够绕过此JavaScript代码。但那是以后的事了。现在我想让前端限制用户

注意：这个问题以前被问过，但完全是基于。我的问题是用我的代码实现这个代码

有问题的代码（限制文件上传）

（功能（全局）{
var imagesPerRow=3，
选择文件，
柱，
预览；
函数PreviewImages（）{
var行；
Array.prototype.forEach.call（选择files.files，函数（文件，索引）{
var cindex=索引%imagesPerRow，
oFReader=新文件读取器（），
细胞，
形象；
如果（cindex==0）{
row=previews.insertRow（Math.ceil（index/imagesPerRow））；
}
image=document.createElement（“img”）；
image.id=“img_”+索引；
image.style.objectFit=“封面”；
image.style.width=“150px”；
image.style.height=“90px”；
单元格=行插入单元格（cindex）；
子单元（图像）；
addEventListener（“加载”，函数assignImageSrc（evt）{
image.src=evt.target.result；
此.removeEventListener（“加载”，assignImageSrc）；
}，假）；
readAsDataURL（文件）；
});
}
global.addEventListener（“加载”，函数windowLoadHandler（）{
global.removeEventListener（“加载”，windowLoadHandler）；
chooseFiles=document.getElementById（“chooseFiles”）；
columns=document.getElementById（“columns”）；
previews=document.getElementById（“previews”）；
变量行=列。插入行（-1），
标题，
我
对于（i=0；i
div.rounded{
宽度：100%；
边框样式：实心；
边框宽度：1px；
边界半径：5px；
}
标签{
显示：块；
}
输入{
显示：块；
}
#可预览{
宽度：100%；
}

添加图像
我无法真正理解上面显示的代码，但您可以做的是：

定义变量
uploadedImages=0
，这样每当用户在网站上上传照片时，
uploadedImages
就会增加1。另外，在上传照片之前，做一个IF语句，每次都要进行检查，并且只有当
uploadedImages
未通过允许的最大上传图像数时，才能上传图像

我试图在您的代码中实现这一点，但我不知道它是如何工作的。
您可以修改
javascript
代码以检查
文件。
输入类型=“文件”的
属性
element&如果
files.length
大于9，则通过将
input
元素的
value
属性指定给空字符串，将文件数组设置为空

检查修改后的
javascript
代码：


（功能（全局）{
var imagesPerRow=3，
选择文件，
柱，
预览；
global.addEventListener（“加载”，函数windowLoadHandler（）{
global.removeEventListener（“加载”，windowLoadHandler）；
chooseFiles=document.getElementById（“chooseFiles”）；
columns=document.getElementById（“columns”）；
previews=document.getElementById（“previews”）；
变量行=列。插入行（-1），
标题，
我
对于（i=0；i9）{
警报（“您最多只能上载9个文件”）；
此值为“”；
e、 预防默认值（）；
}
否则{
var行；
Array.prototype.forEach.call（选择files.files，函数（文件，索引）{
var cindex=索引%imagesPerRow，
oFReader=新文件读取器（），
细胞，
形象；
如果（cindex==0）{
row=previews.insertRow（Math.ceil（index/imagesPerRow））；
}
image=document.createElement（“img”）；
image.id=“img_”+索引；
image.style.objectFit=“封面”；
image.style.width=“150px”；
image.style.height=“90px”；
单元格=行插入单元格（cindex）；
子单元（图像）；
addEventListener（“加载”，函数assignImageSrc（evt）{
image.src=evt.target.result；
此.removeEventListener（“加载”，assignImageSrc）；
}，假）；
readAsDataURL（文件）；
});
}
}，假）；
}，假）；
}（窗口）

反应敏捷的
添加图像
没有，我知道这是限制用户上传选择的正确代码，但我在使用自己的代码实现时迷失了方向。我在上面提供的代码。
$(function() {
    $("button[type = 'submit']").click(function(event) {
        var $fileUpload = $("input[type='file']");
        if (parseInt($fileUpload.get(0).files.length) > 10) {
            alert("You are only allowed to upload a maximum of 10 files");
            event.preventDefault();
        }
    });
});