当前位置:jQuery学习 > jQuery > jQuery获得文件大小

jQuery获得文件大小

时间:2010-09-21QQ群:116983258

本文我们实现,使用jQuery获得文件大小的功能。比如我们在网站页面上提供了文件下载链接,显示下载文件的大小确实是一个好的做法,下边让我们一步一步看看怎么实现这个功能。

首先,我们看看html代码:

<a href="huandeng.jpg">幻灯片</a>
<a href="huandeng.rar" title="">js幻灯片</a>
<a href="calendar.rar" title="">js日历</a>

获得文件大小的关键是我们使用了http://json-head.appspot.com/?url=***,它将返回如下格式的json数据:

{
    "status_code": 200, 
    "ok": true, 
    "headers": {
        "content-length": "28970", 
        "via": "HTTP\/1.1 GWA", 
        "x-powered-by": "ASP.NET", 
        "x-google-cache-control": "remote-fetch", 
        "server": "Microsoft-IIS\/6.0", 
        "cache-control": "private", 
        "date": "Tue, 21 Sep 2010 14:01:48 GMT", 
        "content-type": "text\/html; charset=utf-8", 
        "x-aspnet-version": "2.0.50727"
    }
}

提示:在vs 2008中我们可以打开智能提示,这样我们会更容易的找到我们要使用的方法。打开方法在编辑中简单中开启,如图:

intenlisense

接下来,当我们输入时,便会出现智能提示,如下图。给我们的开发带来了很大的帮助,同时也很大程度的提高了开发速度,推荐大家都使用。

getjson_method

返回了状态、文件大小等信息的json数据后,我们使用$.getJSON()方法便可得到我们需要的信息。接下来,将得到的文件大小进行一下简单的处理,并写入到对应的a标签的title中。完整的jQuery代码如下,在关键部分做了注释。

//获取以.rar .jpg结尾的a标签,进行遍历(可根据需要进行添加文件类型)
$("a[href$='.rar'],a[href$='.jpg']").each(function() {
    var link = $(this); //保存链接地址

    //将返回json格式
    var url = "http://json-head.appspot.com/?url=" + this.href + "&callback=?";

    //获取json数据
    $.getJSON(url, function(data) {
        if (data.ok && data.headers["content-length"]) {
            //文件大小、单位
            var units = [
	                        [1024 * 1024 * 1024, 'GB'],
	                        [1024 * 1024, 'MB'],
	                        [1024, 'KB'],
	                        [1, 'bytes']
                        ];

            var length = data.headers["content-length"];
            for (var i = 0; i < units.length; i++) {

                var unitSize = units[i][0];
                var unitText = units[i][1];

                if (length >= unitSize) {
                    length = length / unitSize;
                    //精确二位
                    length = Math.round(length * 100) / 100;
                    var lengthUnits = unitText;
                    break;
                }
            }
            //将文件大小和单位赋给a标签title
            link.attr("title", length + lengthUnits);
        }
    });
});

到这里,我们就实现了jQuery获取文件大小的目标。

作者:jQuery学习
除非注明,jQuery学习网文章均为原创,转载时必须以链接形式标明本文地址。
本文地址:http://www.jquery001.com/jquery-get-file-size.html

所有话题