JavaScript检测上传文件大小的方法
"这篇文章主要介绍了如何使用JavaScript进行文件大小的验证,特别针对IE和Firefox浏览器进行了不同的处理方式。" 在Web开发中,特别是在文件上传功能的设计中,有时我们需要对用户上传的文件大小进行限制,以确保服务器不会因接收过大文件而造成性能问题或存储空间的浪费。JavaScript作为客户端脚本语言,可以用来实现这种前端验证,从而提高用户体验,减少无效的服务器请求。 首先,代码定义了一个对象`Sys`来检测用户当前使用的浏览器类型。如果浏览器是IE,`Sys.ie`设置为`true`;如果是Firefox,`Sys.firefox`设置为`true`。这是为了后续根据不同的浏览器特性执行不同的文件大小获取方法。 对于Firefox浏览器,其支持HTML5的File API,可以通过`obj.files[0].fileSize`获取到文件大小,其中`obj`是HTML中的文件输入元素(例如`<input type="file">`)。 而对于IE浏览器,由于不支持File API,代码通过创建一个`ActiveXObject("Scripting.FileSystemObject")`来访问本地文件系统。然后使用`GetFile(obj.value)`获取选中的文件,并通过`file.Size`获取文件大小。这里的`obj.value`是文件输入元素的值,即用户选择文件的路径。 在`checkFileChange`函数中,根据`Sys`对象的属性来判断浏览器类型并调用相应的获取文件大小的方法。函数返回的是文件大小以MB为单位的值。 在实际应用中,我们可以调用`checkFileChange()`函数,传入文件输入元素,获取到文件大小。然后与设定的阈值进行比较,如果超过限制,就弹出警告并阻止提交,例如限制文件大小不能超过10MB。 这段代码提供了一个基本的跨浏览器文件大小验证的实现,但在实际项目中,还应考虑其他浏览器的兼容性,以及更复杂的情况,比如多文件上传和异步验证。同时,为了安全性和隐私保护,前端验证只能作为初步检查,服务器端验证仍然是必不可少的。
var Sys = {};
//验证上传文件的大小
if (navigator.userAgent.indexOf("MSIE") > 0) {
Sys.ie = true;
}
if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {
Sys.firefox = true;
}
//obj = document.getElementById("id");
function checkFileChange(obj) {
var filesize = 0;
if (Sys.firefox) {
filesize = obj.files[0].fileSize;
} else if (Sys.ie) {
try {
var fileobject = new ActiveXObject("Scripting.FileSystemObject");//获取上传文件的对象
}
catch (e) {
alert('如果你用的是ie 请将安全级别调低!');
}
var file = fileobject.GetFile(obj.value);//获取上传的文件
//var fileSize = GetFileSize(obj);
var filesize = file.Size;//文件大小
}
// alert(filesize/(1024*1024));
return filesize / (1024 * 1024);
下载后可阅读完整内容,剩余1页未读,立即下载
- 粉丝: 8
- 资源: 8
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C++标准程序库:权威指南
- Java解惑:奇数判断误区与改进方法
- C++编程必读:20种设计模式详解与实战
- LM3S8962微控制器数据手册
- 51单片机C语言实战教程:从入门到精通
- Spring3.0权威指南:JavaEE6实战
- Win32多线程程序设计详解
- Lucene2.9.1开发全攻略:从环境配置到索引创建
- 内存虚拟硬盘技术:提升电脑速度的秘密武器
- Java操作数据库:保存与显示图片到数据库及页面
- ISO14001:2004环境管理体系要求详解
- ShopExV4.8二次开发详解
- 企业形象与产品推广一站式网站建设技术方案揭秘
- Shopex二次开发:触发器与控制器重定向技术详解
- FPGA开发实战指南:创新设计与进阶技巧
- ShopExV4.8二次开发入门:解决升级问题与功能扩展