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傳入便可