源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

javascript实现限制上传文件大小

  • 时间:2021-09-26 15:54 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:javascript实现限制上传文件大小
前言:   项目中经常用到需要上传文件、照片等功能,同时需要限制所上传文件的大小。很多插件都会采用后台请求验证,前端Js校验比较少。本篇介绍一个前端JS便捷判断上传文件大小的方法。   代码很简单,关键就是怎么用JS拿到文件然后获取文件大小,进而去判断拦截。由于各种历史原因,IE的ActiveX控件因素,获取文件的方法可能和其他浏览器有所不同,所以只需稍加判断即可。 JS代码:
[u]复制代码[/u] 代码如下:
<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代码
[u]复制代码[/u] 代码如下:
<input type="file"  style="width: 500px;" onchange="fileChange(this);"/>
  一个 简单、轻便、快捷 的用JS代码来判断文件大小的方法就OK了,至于ActiveXObject对象感兴趣的可以去深究,它可以根据入参的不同返回不同的对象,通常该对象的功能和作用也是非常有用和强大的。 本文内容就到这里了,是不是非常简单实用的代码呢,希望大家能够喜欢。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部