js 实现在页面实现上传图片的预览，并判断大小

通过js一般方法实现，因为ie7/8都不能直接显示本地图片，所以可以用div的滤镜效果实现类似效果：

function changePic(filePicker)
{
var oFileChecker=document.getElementById("pic");
oFileChecker.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = filePicker.value;
var img=new Image();
img.src=filePicker.value;
var limit = 400 * 1024;
if (img.complete) {
return;
}
img.onload = function () {
if (img.fileSize> limit)
{
img=new Image();
alert("超过400K了，传不上去的,你得换个图片");
}
};
}

页面代码：

<div id="pic" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);width: 120px;height: 100px;border: 1px black solid;"></div>
<input type="file" name="pctVirgin" onchange="changePic(this)" />

这样在选择图片后就可在div处显示图片

但是，这种方式有几个问题：

1.代码太麻烦，通用性不强，即便是将其抽取到方法中代码量也不少

2.第一次选择大小超大的图片，可以正常显示，但是第二次选择这个图片就不能正常显示提示了

所以做出了基于jquery的图片预览方法，这个不再用div的滤镜实现，而用img：

/**
* 检查上传图片并产生预览
* @param fileId 文本域ID
* @param imgId 预览图片ID
* @param maxSize 图片最大值
* @return
*/
function checkImage(fileId,imgId,maxSize){
var flag = false;
var $file = $("#"+fileId);
var $img = $("#"+imgId);
//var filePareHtml = $file.parent().html();
$img.attr("src","file:///"+$file.val());
var img = new Image();
img.src = $file.val();
img.onload = function (){
if(img.fileSize < maxSize){
flag = true;
}
};
img.src = $file.val();
return flag;
}

在页面调用时可用img加上file标签布局，将两者id传入即可