要实现<input type="file">只接受.jpeg和.jpg文件的限制,可以通过以下几个步骤来实现:
以下是一个示例的代码实现:
HTML部分:
<form>
<input type="file" id="fileInput">
</form>
JavaScript部分:
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function() {
const file = fileInput.files[0];
const allowedExtensions = /(\.jpeg|\.jpg)$/i;
if (!allowedExtensions.exec(file.name)) {
alert('只允许上传.jpeg和.jpg文件');
fileInput.value = '';
return false;
}
// 文件上传逻辑
});
在上述代码中,我们通过使用正则表达式/(\.jpeg|\.jpg)$/i
来判断文件的扩展名是否为.jpeg或.jpg。如果不符合条件,弹出提示框并清空文件选择框的值,阻止文件上传。如果符合条件,可以在注释部分添加文件上传的逻辑。
需要注意的是,这只是前端的限制,用户仍然可以通过其他方式绕过这个限制。因此,在后端服务器上也需要对文件类型进行验证和过滤,以确保上传的文件符合要求。
推荐的腾讯云相关产品:腾讯云对象存储(COS)
领取专属 10元无门槛券
手把手带您无忧上云