导读：今天做图片上传预览，刚开始的做法是，先将图片上传到Nginx，然后重新加载页面才能看到这个图片。在这个过程中，用户一直都看不到自己上传的文件是什么样子。Ps：我发现我真的有强迫症了，都告诉我说不用改，但我真的忍受不了。结果调兼容性，时间又过去了。

一、HTML页代码

<span style="font-family:KaiTi_GB2312;font-size:18px;"><div>

	<div class="img-avatar">

		<div class="vic" id="localImag">

			<img src="/style/css/images/img-avatar-bg.png" id="myPic" />

		</div>

	</div>

	<p class="ui-tips">上传头像会自动生成头像缩略图片，您也可以拖动大图的裁剪区域，调整缩图内容。支持JPG、GIF、PNG等图片格式推荐尺寸：180*180像素</p>

	<form id="form1" action="Teacher/uploadFile" method="post" enctype="multipart/form-data">

		<input type="file" id="file" name="file" class="btn btn-sm btn-normal" style="width: 90px; height: 35px; float: left" onchange="showPicture(this.value)">						  

		<button type="submit" class="btn btn-sm btn-normal">保存</button>

		<input type="hidden" id="studentId" value="${(student.id)!}">

	</form>

</div>

</span>

提示：onchange方法

二、Js代码

<span style="font-family:KaiTi_GB2312;font-size:18px;">function showPicture(value){

	var docObj=document.getElementById("file");

	var imgObjPreview=document.getElementById("myPic");

	if(docObj.files &&docObj.files[0])

	{

		//火狐下，直接设img属性

		imgObjPreview.style.display = 'block';

		imgObjPreview.style.width = '150px';

		imgObjPreview.style.height = '180px';

		//imgObjPreview.src = docObj.files[0].getAsDataURL();

		//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式

		imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);

	}

	else

	{

		//IE下，使用滤镜

		docObj.select();

		var imgSrc = document.selection.createRange().text;

		var localImagId = document.getElementById("localImag");

		//必须设置初始大小

		localImagId.style.width = "150px";

		localImagId.style.height = "180px";

		//图片异常的捕捉，防止用户修改后缀来伪造图片

	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();

	}

	return true;

}</span>

三、总结

这样子，选完文件之后，就可以看到自己选择的图片啦。其实，我感觉这样做和之前的做法是有很大的区别的，之前的预览，是真正保存到服务器上了，然后从服务器加载的图片。而这种预览，只是让用户看看自己选择的东西，并没有往服务器上存。但是，我感觉这一步也是很有必要的。

Ps：话说，这个兼容性还没有调完，还有图片的裁剪功能还没有做，万一用户给提交了个忒无语的呢，嘿嘿，而且图片的格式问题还没有处理呢。同样，这也是明儿个的事儿了。