JavaScript 文件上传限制文件大小和类型

最新推荐文章于 2023-09-19 11:21:34 发布

原创最新推荐文章于 2023-09-19 11:21:34 发布 · 354 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用JavaScript在前端实现文件上传时对文件大小和类型的检查，确保用户只能上传符合要求的文件，提高用户体验并减轻服务器压力。

HTML内容：
<input type="file" name="videToUpload" id="fileId"  accept="video/*">

var files = doucment.getElementById("fileId").files[0];
console.log(files);
/*
*通过上面打印日志可以看到文件的一些基本信息：lastModified: 1584173945318
*lastModifiedDate: Sat Mar 14 2020 16:19:05 GMT+0800 (中国标准时间) {}
*name: "59cf8ef418c94eb05545c5e5cc5fc0d6.mp4"
*size: 1733983
*type: "video/mp4"
*webkitRelativePath: ""
*__proto__: File
*/
//限制文件大小
var mb = files.size / 1048576; //1024*1024=1M 换算成 mb
if(mb > 100){
	layer.msg('大于100M的文件，请压缩后上传！');
	return false;
}

//限制文件类型
var typeArr = files.type.split("/");
if(typeArr[1] != 'mp4'){ //这里可以根据需求判断多个类型
	layer.msg('文件类型不正确！');
	return false;
}