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提交
    }
}

效果

筛选打开文件格式

限制上传文件格式

限制上传文件大小