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