[前端 4] 使用Js实现图片上传预览

导读：今天做图片上传预览，刚开始的做法是，先将图片上传到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：话说，这个兼容性还没有调完，还有图片的裁剪功能还没有做，万一用户给提交了个忒无语的呢，嘿嘿，而且图片的格式问题还没有处理呢。同样，这也是明儿个的事儿了。