js判斷圖片上傳時的文件大小，和寬高尺寸

時間 2019-11-16

原文原文鏈接

今天在作圖片上傳的小功能，使用了一個kissy上傳組件。很好奇它是如何在圖片上傳前，檢測到圖片的大小和尺寸的？咱們來寫個小實例實現一下吧
如何讀取圖片的sizecss

首先，原生input file控件有個files屬性，該屬性是一個數組。數組中的元素有如下屬性：lastModifiedDate，name，size，type，webkitRelativePath，如圖：
html

這樣的話，咱們就能夠檢測到size：git

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下使用濾鏡來處理圖片尺寸控制
所有代碼：github

<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>