jsp中实现图片上传并覆盖背景图片

最新推荐文章于 2024-11-14 14:48:14 发布

如我一般的人

最新推荐文章于 2024-11-14 14:48:14 发布

阅读量159

点赞数 1

文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/z710757293/article/details/139420522

版权

                    <%if(StringUtils.isEmpty(in.getAgentFrontFileID())){ %>
                    <td class="right">&nbsp;证件正面（人像面）</td>
                    <td>
                        <label >
                            <img id="agentURLFront_<%=id %>" src="images/imageBack.png" class="img-responsive" disabled="disabled"/>
                            <input class="showImg" type="file" name="agentURLFrontFile" id="agentURLFront<%=id %>" style="display: none" data-showID="agentURLFront_<%=id %>" />
                        </label>
                        <input class="notNull" type="hidden" value="<%=in.getAgentFrontFileID()%>"/>
                    </td>
                    <%}else{ %>
                    <td class="right">&nbsp;证件正面（人像面）</td>
                    <td>
                        <label >
                            <img id="agentURLFront_<%=id %>" src="<%=path%>/ZengEPlatBussiness.do?op=getPdf&fileID=<%=StringUtils.trim(in.getAgentFrontFileID())%>" class="img-responsive" disabled="disabled" width="585px" height="385px"/>
                            <input class="showImg" type="file" name="agentURLFrontFile" id="agentURLFront<%=id %>" style="display: none">
                        </label>
                        <input class="notNull" type="hidden" value="<%=in.getAgentFrontFileID()%>"/>
                    </td>
                    <%} %>

增加图片变更监听

//为多个file节点绑定onchange事件
    $(".showImg").change(function imgPreview() {
        //判断是否支持FileReader
        if (window.FileReader) {
            var reader = new FileReader();
        } else {
            alert('您的设备不支持图片预览功能，如需该功能请升级您的设备');
        }

        //获取文件
        var file = this.files[0];
        var imageType = /^image\//;
        //是否是图片
        if (!imageType.test(file.type)) {
            alert('请选择图片！');
            return;
        }
        if (file.size > 5 * 1024 * 1024) {
            alert('上传的图片的大于5M,请重新选择！');
            return;
        }
        var showID = $(this).prev().attr('id');
        //读取完成
        reader.onload = function (e) {
            //获取图片dom
            var img = $('#' + showID);
            //图片路径设置为读取的图片
            img.attr("src", e.target.result);
        };
        reader.readAsDataURL(file);
        $(this).prev().attr("width", "585");
        $(this).prev().attr("height", "385");
    });