JS实现限制input上传文件的大小和格式
场景
在实现Excel导入数时,需要上传excel格式的文件。
在前端js进行判断,限制上传文件的大小和格式。
实现
html页面代码可以通过accept属性来筛选打开文件的格式。
<form class="dropzone" id="dropzoneForm" enctype="multipart/form-data">
<div class="fallback">
<input name="file" value="1M以内的Excel文件" type="file" id="file_id" accept=".xls,.xlsx" onchange="fileChange(this);" />
</div>
</form>
然后在js中实现方法
function fileChange(target) {
var fileSize = 0;
fileSize = target.files[0].size;
var size = fileSize / 1024;
if(size>1000){
alert("附件不能大于1M");
target.value="";
return false; //阻止submit提交
}
var name=target.value;
var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
if(fileName !="xls" && fileName !="xlsx"){
alert("请选择Excel格式文件上传(xls、xlsx)!");
target.value="";
return false; //阻止submit提交
}
}
效果
筛选打开文件格式
限制上传文件格式
限制上传文件大小