学步园

项目中用到图片上传前预览功能，在网上找了一些资料，终于实现了 

现在记录下来供以后参考使用

此功能基于js代码，不需要引入任何js代码，操作步骤如下：

1、页面添加 html代码

//文件选择框

<input type="file" name="imgFile" id="imgFile" accept="image/*" style="width:210px;height: 21px"/>

<div id="previewImgDiv" >
	<div id="localImg"><img id="preview" width="128px" height="128px"/></div>	
</div>

<!--iframe中需要用到这个-->
<div id="picDiv" style="width: 1px; height: 1px;"></div> 

2、添加js代码 

function setImagePreview() 
{
	var docObj=document.getElementById("imgFile");
	var imgObjPreview=document.getElementById("preview");
	if(docObj.files &&docObj.files[0])
	{
	        //火狐下，直接设img属性
	        //imgObjPreview.style.display = 'block';
	        //imgObjPreview.style.width = '250px';
	        //imgObjPreview.style.height = '350px';                    
	        //imgObjPreview.src = docObj.files[0].getAsDataURL();

	      	//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式  
	      	imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
	}
	else
	{
	        //IE下，使用滤镜
	        docObj.select();
	        //可以解决IE9下document.selection.createRange().text无法获取图片路径失效的问题解决 --不可少 可提高兼容性 但是在iframe下无效 
	        //docObj.blur();
	        //任意元素 div 或者button可以获取焦点的元素 可以解决IE9和iframe下document.selection.createRange().text无法获取图片路径失效的问题解决
	        document.getElementById("#picDiv").focus();
	                
	        var imgSrc = document.selection.createRange().text;
	        var localImagId = document.getElementById("localImg");
	        //必须设置初始大小
	        localImagId.style.width = "128px";
	        localImagId.style.height = "128px";
	        //图片异常的捕捉，防止用户修改后缀来伪造图片
		try
		{
	             localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
	             localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
	        }
	        catch(e)
	        {
	             alert("您上传的图片格式不正确，请重新选择!");
	             return false;
	        }
	        imgObjPreview.style.display = 'none';
	        document.selection.empty();
	}
}

经过上面两部操作就可以实现图片上传前预览功能。

实际使用截图：