上传图片实现预览功能
js
function PreviewImage(obj, imgPreviewId, divPreviewId) { var allowExtention = ".jpg,.bmp,.gif,.png"; var extention = obj.value.substring(obj.value.lastIndexOf(".") + 1) .toLowerCase(); var browserVersion = window.navigator.userAgent.toUpperCase(); if (allowExtention.indexOf(extention) > -1) { if (browserVersion.indexOf("MSIE") > -1) { if (browserVersion.indexOf("MSIE 6.0") > -1) { document.getElementById(imgPreviewId).setAttribute("src", obj.value); } else { obj.select(); var newPreview = document.getElementById(divPreviewId + "New"); if (newPreview == null) { newPreview = document.createElement("div"); newPreview.setAttribute("id", divPreviewId + "New"); newPreview.style.width = 160; newPreview.style.height = 170; newPreview.style.border = "solid 1px #d2e2e2"; } newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=‘scale‘,src=‘" + document.selection.createRange().text + "‘)"; var tempDivPreview = document.getElementById(divPreviewId); tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview); tempDivPreview.style.display = "none"; } } else if (browserVersion.indexOf("FIREFOX") > -1) { var firefoxVersion = parseFloat(browserVersion.toLowerCase().match( /firefox\/([\d.]+)/)[1]); if (firefoxVersion < 7) { document.getElementById(imgPreviewId).setAttribute("src", obj.files[0].getAsDataURL()); } else { document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(obj.files[0])); } } else if (obj.files) { if (typeof FileReader !== "undefined") { var reader = new FileReader(); reader.onload = function(e) { document.getElementById(imgPreviewId).setAttribute("src", e.target.result); } reader.readAsDataURL(obj.files[0]); } else if (browserVersion.indexOf("SAFARI") > -1) { alert("暂时不支持Safari浏览器!"); } } else { document.getElementById(divPreviewId) .setAttribute("src", obj.value); } } else { alert("仅支持" + allowSuffix + "为后缀名的文件!"); obj.value = ""; if (browserVersion.indexOf("MSIE") > -1) { obj.select(); document.selection.clear(); } obj.outerHTML = obj.outerHTML; } }
jsp页面
<input type="file" name="file" id="file" onchange="PreviewImage(this,‘activitiesImg‘,‘divNewPreview‘)"/> <div id="divNewPreview"> <img id="activitiesImg" alt="无" width="150px" height="150px"> </div>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。