dwz 查看图片

1. 页面

<link href="/codeManage/public/imgZoom/jquery.artZoom.css" rel="stylesheet" type="text/css" media="screen"/>
<script src="/codeManage/public/imgZoom/jquery.artZoom.min.js" type="text/javascript"></script>
<script>
    $('.artZoom').artZoom({
        path: 'public/imgZoom/images',  // 设置artZoom图片文件夹路径
        preload: true,      // 设置是否提前缓存视野内的大图片
        blur: true,         // 设置加载大图是否有模糊变清晰的效果

        // 语言设置
        left: '左旋转',        // 左旋转按钮文字
        right: '右旋转',       // 右旋转按钮文字
        source: '看原图'       // 查看原图按钮文字
    });

    //删除后刷新
    function navTabReload(id){
        DWZ.ajaxDone(id);
        navTab.reloadFlag("Jgdebind_publicfindPic");
    }
</script>

<style>
    .img_title {
        font-size: 14px;
        font-weight: bold;
        height: 25px;
        width: 300px;
        border: 1px solid #666666;
        background-position: center;
        vertical-align: middle;
        line-height: 25px;
    }
    .imgsss {
        max-width: 900px; 
        width:expression(this.width > 900 ? "900px" : this.width+"px"); overflow:hidden;
        max-height: 300px; 
        height:expression(this.height > 300 ? "300px" : this.height+"px"); overflow:hidden;
    } 
    .filesDiv{
        width: 800px;
        height: 25px;
        border: 1px solid #7cc5e5;
        margin-left: auto; 
        margin-right: auto;
        text-align: center;
        font-size: 14px;
        line-height: 25px;
        font-weight: bold;
        color: #7cc5e5;
    }
    .picDiv{
        width: 400px;
        height: 25px;
        border: 1px solid #7cc5e5;
        margin-left: auto; 
        margin-right: auto;
        text-align: center;
        font-size: 14px;
        line-height: 25px;
        font-weight: bold;
        color: #7cc5e5;
    }
</style>

<div class="pageContent">
    <form method="post" action="/codeManage/?spm=${encryption("Jgdebind/publicfindPic")}" class="pageForm required-validate" onsubmit="return validateCallback(this, navTabAjaxDone);">
        <div class="pageFormContent" layoutH="56">
            <div class="filesDiv">
                (编号：${(dnum)! })商户---资料图片
            </div>
            <div class="divider"></div>
            <#list  filesList as  files >
                <table style="width:100%;text-align: center;">
                    <tr>
                        <td style="width:100%;text-align: center;"><img alt="${files.AFI_FILENAME}--点击查看大图（旋转照片）" src="/codeManage/?spm=${encryption("Jgdebind/showImage")}&id=${files.AFI_FILEURL}" class="artZoom imgsss" data-artZoom-show="/codeManage/?spm=${encryption("Jgdebind/showImage")}&id=${files.AFI_FILEURL}"  data-artZoom-source="/codeManage/?spm=${encryption("Jgdebind/showImage")}&id=${files.AFI_FILEURL}"></td>
                    </tr>
                    <tr>
                        <td style="height: 40px;">
                            <div class="picDiv">
                                ${(files.AFI_FILENAME)! }&nbsp;&nbsp;&nbsp;
                                        <a href="/codeManage/?spm=${encryption("AppFilesInfo/delete")}&id=${(files.AFI_ID)! }" style="color:blue;" target="ajaxTodo" callback="navTabReload" title="确认删除${(files.AFI_FILENAME)! }吗？">(删除)</a>
                            </div> 
                        </td>
                    </tr>
                </table>
                <div class="divider"></div>
            </#list>
        </div>
        <div class="formBar">
            <ul>
                        <!--<li>
                            <a class="buttonActive" href="${(projectName)!}/?spm=${encryption("AppFilesInfo/add")}&dnum=${(dnum)!}" rel="Filesinfo_pperaFile" target="dialog" width="1000" height="500"><span>上传商户图片资料</span></a>
                        </li>-->
                <li>
                    <div class="button">
                        <div class="buttonContent">
                            <button type="button" class="close">
                                关闭
                            </button>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </form>
</div>

1. 后台

@RequestMapping("/publicfindPic")
        public String publicfindPic() {
            String id = request.getParameter("id");
            List<Map<String, Object>> filesInfoList = jgdebindService.getList("selectPicInfo", id.toString());
            // 存储图片信息
            setAttribute("filesList", filesInfoList);
            setAttribute("dnum", id);
            return display();
        }

@RequestMapping("/showImage")
        public void showImage() throws IOException {
            byte[] byt=request.getParameter("id").getBytes("ISO-8859-1");
            String id=new String(byt,"utf-8");
            response.setContentType("image/jpeg");
            // 获取图片绝对路径
            File file = new File(id);
            // 创建文件输入流
            FileInputStream is = new FileInputStream(file);
            // 响应输出流
            ServletOutputStream out = response.getOutputStream();
            // 创建缓冲区
            byte[] buffer = new byte[1024];
            int len = 0;
            while ((len = is.read(buffer)) != -1) {
                out.write(buffer, 0, len);
            }
            is.close();
            out.flush();
            out.close();
        }

js下载地址