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