實現html上傳圖像時預覽

今天寫項目的時候有個想要在修改個人信息的時候，上傳圖片可以選擇預覽，經過多番查找，找到一個比較有效的方法，這也是一個比較常用的需求，這裏給大家分享。js代碼見下

<script type="text/javascript">
//下面用於圖片上傳預覽功能
function imgChange(headInput) {
	var headPreview=document.getElementById("headPreview");
	if(headInput.files &&headInput.files[0])
	{
		headPreview.src = window.URL.createObjectURL(headInput.files[0]);
		//alert("我是用的第一種方法");
	}
	else
	{
	//alert("我是用的第二種方法");
		//IE下，使用濾鏡
		headInput.select();
		var imgSrc = document.selection.createRange().text;
		//必須設置初始大小
		headPreview.style.width = "100px";
		headPreview.style.height = "100px";
		//圖片異常的捕捉，防止用戶修改後綴來僞造圖片
		try{
			localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
			localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
			}
		catch(e)
			{
			alert("您上傳的圖片格式不正確，請重新選擇!");
			return false;
			}
		headPreview.style.display = 'none';
		document.selection.empty();
		}
	return true;
}

    		<tr class="active"><td colspan=2<img id="headPreview" class="img-rounded" src="<%=basePath %>${cmAdmin.head}" οnclick="headInput.click()">
    		<input id="headInput"  name="headimg" type="file" οnchange="imgChange(this)" style="display:none"/>

上面是html的代碼，親測有效。