JSP 上传图片并显示、按钮返回，返回前一页

原创已于 2022-12-04 21:19:31 修改 · 828 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #html

于 2022-11-25 07:23:28 首次发布

前端专栏收录该内容

8 篇文章

订阅专栏

这篇博客介绍了如何在没有后端接口的情况下，利用JavaScript实现图片上传并实时预览的功能。通过HTML的input元素和JavaScript的File API，可以在客户端完成图片的选择和显示，适用于前端开发中的图像处理场景。

jsp上传图片并显示，暂无后端接口交互

脚本script先声明

<%--圖片顯示固定參數--%>
<script>
    function setImagePreview() {
       
        var docObj = document.getElementById("doc");
        var imgObjPreview = document.getElementById("preview");
        if (docObj.files && docObj.files[0]) {
            //火狐下，直接设img属性
            imgObjPreview.style.display = 'block';
            imgObjPreview.style.width = '300px';
            imgObjPreview.style.height = '120px';
            //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 = "250px";
            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;
    }
</script>

localImag 为div的id

preview 为img的id

doc 为input的id

localImag 为div的id

preview 为img的id

doc 为input的id

localImag 为div的id

preview 为img的id

doc 为input的id

注意一定要脚本先声明

上传文件，注意img的 id="preview"、div的 id="localImage"、 input 的 id="doc" 脚本中要用到的参数

<tr>
    <td width="12%" align="right"><h3>僱主商業登記證影像:</h3></td>
    <td align="left">
    <div id="localImage">
        <img id="preview" width=-1 height=-1 style="diplay:none"/>
        <input type="file" name="file" id="doc" onchange="javascript:setImagePreview();">
    </div>
    </td>
</tr>

返回前一页

<tr>
    <td>
        <input type="button" id="backbtn" value="返回" onclick="javascript:history.go(-1)"/>
    </td>
</tr>