js判断图片上传时的文件大小，和宽高尺寸

今天在做图片上传的小功能，使用了一个kissy上传组件。很好奇它是如何在图片上传前，检测到图片的大小和尺寸的？我们来写个小实例实现一下吧
如何读取图片的size

首先，原生input file控件有个files属性，该属性是一个数组。数组中的元素有以下属性：lastModifiedDate，name，size，type，webkitRelativePath，如图：
图片描述

这样的话，我们就可以检测到size：

var fileData = file.files[0];
var size = fileData.size;   //注意，这里读到的是字节数
var isAllow = false;
var maxSize = Max_Size;
maxSize = maxSize * 1024;   //转化为字节
isAllow = size <= maxSize;

兼容性：ie9下读不到input file.files这个属性。思考：怎么办？
如何读取图片的width,height？
图片真实的宽度和高度，可以通过实例化Image对象、加载src 来获取。
兼容性：IE下使用滤镜来处理图片尺寸控制
全部代码：

<html>
<head>
    <title>测试</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="http://g.tbcdn.cn/tb/global/2.9.1/global-min.css">
    <script src="http://g.tbcdn.cn/??kissy/k/1.4.2/seed-min.js"></script>
</head>
<body>

<form action="" method="post">
    <input type="file" id="uploader"/>
    <input type="submit" id="submit"/>
</form>
<div id="tip1"></div>
<div id="tip2"></div>
<script>

    //http://www.oschina.net/code/snippet_819257_22844
    //https://github.com/kissygalleryteam/uploader/blob/master/3.0.1/build/plugins/auth/auth.js
    KISSY.use('core',function(S){
        var $ = S.all, D = S.DOM;
        var Max_Size = 2000; //2M
        var Max_Width = 100; //100px
        var Max_Height = 200; //200px

        $('#submit').on('click',function(ev){
            ev.halt();
            var fileEl = D.get('#uploader');

            console.log(fileEl.files);

            testMaxSize(fileEl);
            testWidthHeight(fileEl);
        })

        function testMaxSize(file){
            if(file.files && file.files[0]){
                var fileData = file.files[0];

                var size = fileData.size;   //注意，这里读到的是字节数
                var isAllow = false;
                if(!size) isAllow = false;

                var maxSize = Max_Size;
                maxSize = maxSize * 1024;   //转化为字节
                isAllow = size <= maxSize;

                showTip1(isAllow);

            }else{
                /*... ie9下用iframe上传*/
                /*
                // 或者用以面的方式实现
                // var img = new Image();
                // 再用img.src=filepath,再用img.fileSize用取，这里不写啦，读者自行实践一下
                */

            }

        }

        function testWidthHeight(file){
            var isAllow = false;
            debugger;

            if(file.files && file.files[0]){
                var fileData = file.files[0];

                //读取图片数据
                var reader = new FileReader();
                reader.onload = function (e) {
                    var data = e.target.result;
                    //加载图片获取图片真实宽度和高度
                    var image = new Image();
                    image.onload=function(){
                        var width = image.width;
                        var height = image.height;
                        isAllow = width >= Max_Width && height >= Max_Height;
                        showTip2(isAllow);
                    };
                    image.src= data;
                };
                reader.readAsDataURL(fileData);

            }else{
                //IE下使用滤镜来处理图片尺寸控制
                //文件name中IE下是完整的图片本地路径
                var input = D.get('#uploader');
                //var input = uploader.get('target').all('input').getDOMNode();
                input.select();
                //确保IE9下，不会出现因为安全问题导致无法访问
                input.blur();
                var src = document.selection.createRange().text;
                var img = $('<img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);width:300px;visibility:hidden;"  />').appendTo('body').getDOMNode();
                img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
                var width = img.offsetWidth;
                var height = img.offsetHeight;
                $(img).remove();

                isAllow = width >= Max_Width && height >= Max_Height;
                showTip2(isAllow);
            }

        }

        function showTip1(isAllow){
            var tipEl = D.get('#tip1'),
                    html = '';
            if(isAllow){
                html = '大小通过</br>';
            }else{
                html = '大小未通过，要求'+ Max_Size +'</br>';
            }
            D.html(tipEl,html);
        }

        function showTip2(isAllow){
            var tipEl = D.get('#tip2'),
                    html = '';

            if(isAllow){
                html += '宽高通过';
            }else{
                html += '宽高未通过，要求width:'+ Max_Width +', height:'+ Max_Height;
            }
            D.html(tipEl,html);
        }


    })

</script>
</body>
</html>

js判断图片上传时的文件大小，和宽高尺寸

CodeMan

引用和评论

JS面试

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具