场景

在实现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提交}
}

效果

筛选打开文件格式

限制上传文件格式

限制上传文件大小

JS实现限制input上传文件的大小和格式相关推荐

input file 文件上传,js控制上传文件的大小和格式
文件上传一般是用jquery的uploadify,比较好用.后面会出文章介绍uploadify这个插件. 但是,有时候为了偷懒,直接就用input 的file进行文件和图片等的上传,input fil ...
获取当前按钮所在行的input_form表单的input上传文件
在这次的一个小项目中用到了文件的上传,在之前我对form表单的认知还只是发送用户名和密码.行吧,既然用到了那就硬着头皮上咯. 使用首先文件的上传需要一个type=file的input.它的意义就是上 ...
[html] input上传文件可以同时选择多张吗？怎么设置？
[html] input上传文件可以同时选择多张吗?怎么设置? <input type="file" multiple /> 个人简介我是歌谣,欢迎和大家一起交流前后 ...
[html] input上传文件可以同时选择多张吗？怎么设置？
[html] input上传文件可以同时选择多张吗?怎么设置? <input type="file" multiple="multiple" value= ...
原生js实现拖拽上传文件
原生js实现拖拽上传文件 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
如何限制上传服务器的文件容量,如何通过配置php文件限制上传文件的大小
在网站开发的过程中,为了确保能够充分利用服务器的空间,在开发上传功能时,必须对上传文件的大小进行控制.那么我们如何进行对上传文件的大小进行控制呢? 控制文件的大小可以从两个方面入手: 第一个是在PHP ...
html5 如何实现客户端验证上传文件的大小
在HTML 5中,现在可以在客户端进行文件上传时的校验了,比如用户选择文件后,可以马上校验文件的大小和属性等.本文章向码农介绍html5 如何实现客户端验证上传文件的大小,感兴趣的码农可以参考一下. ...
如何上传html验证文件大小,html5 实现客户端验证上传文件的大小(简单实例)
在HTML 5中,现在可以在客户端进行文件上传时的校验了,比如用户选择文件后,可以马上校验文件的大小和属性等.本文章向码农介绍html5 如何实现客户端验证上传文件的大小,感兴趣的码农可以参考一下. ...
手机如何看python文件大小_如何安全地检查上传文件的大小？(How to check size of uploaded file safely in bottlepy?)...
如何安全地检查上传文件的大小?(How to check size of uploaded file safely in bottlepy?) 我真的害怕read()操作,因为它使用内存. 例如,任何 ...

JS实现限制input上传文件的大小和格式

场景

实现

效果

JS实现限制input上传文件的大小和格式相关推荐

最新文章

热门文章