html5图片上传 限制,关于input type="file" 上传图片，如何限制上传图片的分辨率...

在项目中，需要限制上传图片的分辨率，同时要兼容各浏览器(IE8及IE8以上，谷歌，火狐)。经过搜索和思考最终解决这个bug，记录下来，希望能帮助他人。

HTML代码：

CSS代码：

.conImage{

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */

height: 1px;

visibility:hidden;

overflow: hidden;

}

JS代码：

var width,height;

function handleConFiles(files){

if(navigator.userAgent.indexOf("MSIE 8.0")>0 navigator.userAgent.indexOf("MSIE 9.0")>0){

var objPreviewSizeFake = $(".conImage").get(0);//jquery对象转化为DOM对象

var fileupload = document.getElementById("head");

var $fileupload = $(fileupload);

$fileupload.select();

$fileupload.blur();

path = document.selection.createRange().text;

if (/"\w\W"/.test(path)) {

path = path.slice(1,-1);

}

objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = path;

width=objPreviewSizeFake.offsetWidth;

height=objPreviewSizeFake.offsetHeight;

if(width > 1024 || height > 120){

fill = false;

alert("上传图片的尺寸应在1024*120之间");

}

document.selection.empty();

}else{

for (var i = 0; i < files.length; i++) {

var file = files[i];

var reader = new FileReader();

var ret = [];

reader.onload = function(theFile) {

var image = new Image();

image.onload = function() {

width=this.width;

height=this.height;

if(width> 1024 || width> 120){

fill = false;

alert("头像尺寸应在1024x120之间");

}

};

image.src = theFile.target.result;

}

reader.readAsDataURL(file);

}

}

}

其中js部分可以根据自己的需求，可以增加参数，重新封装一下；也可以将分辨率的判断放在其他地方等等。

注：FileReader用于读取文件，属于HTML5。ie9及ie9以下不支持。