js检测上传文件大小
来源:互联网 发布:simulink输入数据 编辑:程序博客网 时间:2024/05/22 06:22
前言:
项目中经常用到需要上传文件、照片等功能,同时需要限制所上传文件的大小。很多插件都会采用后台请求验证,前端Js校验比较少。本篇介绍一个前端JS便捷判断上传文件大小的方法。
代码很简单,关键就是怎么用JS拿到文件然后获取文件大小,进而去判断拦截。由于各种历史原因,IE的ActiveX控件因素,获取文件的方法可能和其他浏览器有所不同,所以只需稍加判断即可。
JS代码:
<script type="text/javascript"> // 判断是否为IE浏览器: /msie/i.test(navigator.userAgent) 为一个简单正则 var isIE = /msie/i.test(navigator.userAgent) && !window.opera; function fileChange(target){ var fileSize = 0; if (isIE && !target.files) { // IE浏览器 var filePath = target.value; // 获得上传文件的绝对路径 /** * ActiveXObject 对象为IE和Opera所兼容的JS对象 * 用法: * var newObj = new ActiveXObject( servername.typename[, location]) * 其中newObj是必选项。返回 ActiveXObject对象 的变量名。 * servername是必选项。提供该对象的应用程序的名称。 * typename是必选项。要创建的对象的类型或类。 * location是可选项。创建该对象的网络服务器的名称。 *\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ * Scripting.FileSystemObject 为 IIS 内置组件,用于操作磁盘、文件夹或文本文件, * 其中返回的 newObj 方法和属性非常的多 * 如:var file = newObj.CreateTextFile("C:\test.txt", true) 第二个参表示目标文件存在时是否覆盖 * file.Write("写入内容"); file.Close(); */ var fileSystem = new ActiveXObject("Scripting.FileSystemObject"); // GetFile(path) 方法从磁盘获取一个文件并返回。 var file = fileSystem.GetFile(filePath); fileSize = file.Size; // 文件大小,单位:b } else { // 非IE浏览器 fileSize = target.files[0].size; } var size = fileSize / 1024 / 1024; if (size > 1) { alert("附件不能大于1M"); } }</script>
HTML代码
<input type="file" style="width: 500px;" onchange="fileChange(this);"/>
一个 简单、轻便、快捷 的用JS代码来判断文件大小的方法就OK了,至于ActiveXObject对象感兴趣的可以去深究,它可以根据入参的不同返回不同的对象,通常该对象的功能和作用也是非常有用和强大的。
ps:欢迎转载,转载请注明出处:http://www.cnblogs.com/liuyitian/p/4275430.html
阅读全文
0 0
- js检测上传文件大小
- js检测上传文件大小(ie中判断文件上传兼容)
- js上传前预览图片,检测上传文件大小
- 上传前检测文件大小
- IE+JS: 上传之前检测图片文件大小及类型
- IE+JS: 上传之前检测图片文件大小October
- js控制上传文件大小
- js判断上传文件大小
- js判断上传文件大小
- js 控制上传文件大小
- JS 获取上传文件大小
- js判断上传文件大小
- js控制上传文件大小
- JS判断上传文件大小
- js判断上传文件大小
- JS 获取上传文件大小
- js限制上传文件大小
- js判断上传文件大小
- STM32博客记录
- time
- (转)android开发中常见日期管理工具类
- 前端零基础入门(六):基础css样式之border
- Jenkins + testNg + maven 项目持续集成
- js检测上传文件大小
- js 获取数组最小/最大值
- 笔记:invoke方法和invoke字节码
- spring boot redis cache 缓存学习
- Qt之界面数据存储与获取
- XCode9打包上传遇到的问题和解决方式
- 在Anaconda使用JupyterBook使用的密码问题
- Java配置path和classpath的含义详解
- 一个小demo