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" οnchange="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传入即可