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 相关文章推荐
js判断样式className同时增加class或删除class
Jan 30 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
学习JavaScript事件流和事件处理程序
Jan 25 Javascript
js css+html实现简单的日历
Jul 14 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 Javascript
Vue中全局变量的定义和使用
Jun 05 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 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之第二天
2006/10/09 PHP
PHP 错误之引号中使用变量
2009/05/04 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
JS清除IE浏览器缓存的方法
2013/07/26 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
[00:10]神之谴戒
2019/03/06 DOTA
Django admin美化插件suit使用示例
2017/12/12 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
python Selenium 库的使用技巧
2020/10/16 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
中国宠物用品商城:E宠商城
2016/08/27 全球购物
英国门销售网站:Green Tree Doors
2020/01/07 全球购物
医院实习接收函
2014/01/12 职场文书
婚礼答谢宴主持词
2014/03/14 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
迎新年主持词
2015/07/06 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
MySQL令人大跌眼镜的隐式转换
2021/08/23 MySQL