页面代码:
<div id="imgDiv"> <img id="imgFile" width='80' height='80'/> </div> <input type="file" name="sysPicture" id="titleImg" accept="image/*" required="true" onChange="setImagePreview(this,imgDiv,imgFile);"/>
引入js(忘了是网上哪位大佬写的):
<!-- 引用上传图片预览js --> <script type="text/javascript" src="${pageContext.request.contextPath}/my_js/imgPreview.js"></script>
js源码:
function setImagePreview(docObj, localImagId, imgObjPreview) { var name = docObj.value; var type = name.split("."); type = type[type.length - 1]; if ("jpg" != type && "png" != type && "jpeg" != type && "gif" != type) { alert("错误的类型,请选择图片"); document.getElementById("titleImg").value = null;// 防止将非图片类型上传 $("#imgFile").prop("src","");// 清空图片显示 return; } if (docObj.files && docObj.files[0]) { // alert("hello"+docObj.files[0]); // 火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式 document.getElementById("imgDiv").style.display = "block"; document.getElementById("imgFile").src = window.URL .createObjectURL(docObj.files[0]); } else { // IE下,使用滤镜 docObj.select(); var imgSrc = document.selection.createRange().text; // 必须设置初始大小 localImagId.style.width = "300px"; localImagId.style.height = "200px"; // 图片异常的捕捉,防止用户修改后缀来伪造图片 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; }
accept="image/*"
该属性可以使点击上传时,筛选掉除图片和文件夹外的文件