上传图片实现预览功能

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>