今天在做图片上传的小功能，使用了一个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下使用滤镜来处理图片尺寸控制

全部代码：

测试

//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.οnlοad=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 = $('').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 = '大小通过';

}else{

html = '大小未通过，要求'+ Max_Size +'';

}

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

}

})