javascript 上传图片 检测宽度 高度 文件大小

最近做一个iframe上传的组件，需要限制上传文件的 高度宽度还有 大小。所以研究了下如何使用js获取这些信息。

网上的内容很多，不过很多解决方案都是有问题，下面进行些罗列和分析。

网上的几种解决方案

第一种：

var image1 = new Image();
image1.dynsrc = path;
alert(image1.dynsrc);  //这里路径显示真确
alert(image1.fileSize);  //但是这里老是-1 为什么？？

老是-1 是因为没有加载完，所以需要onload判断

dynsrc只有ie支持，但是连ie自己都给放弃了，经测试只有ie6支持。7,8都不行。

应该使用src属性。

var image = new Image();
image.onload =function(){
var width = image.width;
var height = image.height;
var fileSize = image.fileSize;
alert(width+'======'+height+"====="+fileSize);
}
image.src = path;

改成这个后，测试 ie系列都支持，但是 在chrome等现代浏览器下是不行的，chrome这些浏览器 不允许读取本地的文件， 所以src是只读属性。

这边需要注意的是：最好将onload函数放在image.src = path 的前面，因为image对象下次加载时会优先读取缓存，onload放在后面可能会造成加载太快，来不及触发onload事件。

第二种：

function getFileSize(filePath)

{

var fso = new ActiveXObject("Scripting.FileSystemObject");

alert("文件大小为："+fso.GetFile(filePath).size);

}

没有测试 基本没有意义，会弹出安全提示

这种方法可以实现，也容易被开发人员想到，但是需要更改浏览器的安全设置，不然会报“Automation服务器不能创建对象”这个脚本错误。将浏览器的安全设置改为“中”，然后将ActiveX的设置设为启用就OK了，显然不能对用户做出什么要求，所以不推荐。

第三种：

使用html5的 http://caniuse.com/fileapi

var f = document.getElementById("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;
alert(width+'======'+height+"====="+f.size);
};
image.src= data;
};
reader.readAsDataURL(f);

这是使用的html5技术，测试大部分现代浏览器都是可行的。

第四种

经过查看开源组件的源码，发现了一种独特的写法，通过ie的滤镜实现读取文件的宽度高度

var input = self.input[0]
var temp_document = self.iframe[0].contentDocument || self.iframe[0].document;
input.select();
//确保IE9下，不会出现因为安全问题导致无法访问
input.blur();
var src = temp_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();

此代码需要jquery选择器的支持。这种方法据说最稳定。

通过以上的分析，确定出一种最稳妥的跨浏览器的解决方案为

window.check=function(){
var input = document.getElementById("file");
if(input.files){
//读取图片数据
var f = input.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;
alert(width+'======'+height+"====="+f.size);
};
image.src= data;
};
reader.readAsDataURL(f);
}else{
var image = new Image();
image.onload =function(){
var width = image.width;
var height = image.height;
var fileSize = image.fileSize;
alert(width+'======'+height+"====="+fileSize);
}
image.src = input.value;

}

}

对应的html为：

<input id="file" type="file">
<input id="Button1" type="button" value="button" onclick="check()">

ps:

这个地址http://www.planeart.cn/?p=1121 使用一种方式可以很方便的提前获取 width和height 非常好

思路是，浏览器在图片未加载完时会通过http协议的header提前知道width和height，所以通过一个计时器，不停检测，快速的得到宽度高度。