jQuery统计上传文件大小的方法


Posted in Javascript onJanuary 24, 2015

本文实例讲述了jQuery统计上传文件大小的方法。分享给大家供大家参考。具体如下:

对于现代浏览器(支持html5)来说,在客户端统计上传文件的大小,可以通过$(selector)[0].files[0].size来实现。但在老版本的IE浏览器中,比如IE7,IE8或IE9,却不支持这种做法,但可以借助ActiveXObject对象来实现。

<input type="file" name="f" id="f" value="上传文件"/>

<input type="button" value="获取上传图片的大小" id="g"/>

@section scripts

{

    <script type="text/javascript">

        $(function() {

            $('#g').on("click", function() {

                getFileSize("f");

            });

        });

        function getFileSize(eleId) {

            try {

                var size = 0;

               

                if ($.browser.msie) {//ie旧版浏览器

                    var fileMgr = new ActiveXObject("Scripting.FileSystemObject");

                    var filePath = $('#' + eleId)[0].value;

                    var fileObj = fileMgr.getFile(filePath);

                    size = fileObj.size; //byte

                    size = size / 1024;//kb

                    //size = size / 1024;//mb

                } else {//其它浏览器

                    size = $('#' + eleId)[0].files[0].size;//byte

                    size = size / 1024;//kb

                    //size = size / 1024;//mb

                }

                alert('上传文件大小为' + size + 'kb');

            } catch (e) {

                alert("错误:" + e);

            } 

        }

    </script>

}

补充:

在IE中启用ActiveXObject按如下做法:

→工具
→Internet选项
→安全
→自定义级别,启用ActiveXObject

jQuery统计上传文件大小的方法

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
May 05 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
Dec 16 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 Javascript
限制上传文件大小和格式的jQuery插件实例
Jan 24 #Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 #Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 #Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 #Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 #Javascript
You might like
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
基于jquery的模态div层弹出效果
2010/08/21 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
JS中实现简单Formatter函数示例代码
2014/08/19 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
js实现录音上传功能
2019/11/22 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
Python装饰器用法实例总结
2018/05/26 Python
浅谈python之新式类
2018/08/12 Python
实例讲解python中的协程
2018/10/08 Python
python简单区块链模拟详解
2019/07/03 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
详解python中的异常和文件读写
2021/01/03 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
Python是如何进行类型转换的
2013/06/09 面试题
商务主管岗位职责
2013/12/08 职场文书
小学数学课题方案
2014/06/15 职场文书
博士生求职信
2014/07/06 职场文书
数学教师个人总结
2015/02/06 职场文书
搞笑婚前保证书
2015/02/28 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书