一个最简单的查看图片弹出效果

一个最简单的onclick触发事件就可以

<a href="javascript:void(0);" class="" onclick="look('${bean['FILEPATH']}');">查看</a>

        function look(obj) {
            var img = new Image();
            //下面的是获取图片的真是地址和内容的url
            var src='${ctx}/out/showImg?imgFile='+obj;
            var imgHtml = "<img src='" + src + "&time=" + new Date().getTime() + "' />";
            //弹出层
            top.layer.open({
                type: 1,
                shade: 0.8,
                offset: 'auto',
                area: [978 + 'px', 650 + 'px'],
                shadeClose: true,//点击外围关闭弹窗
                scrollbar: false,//不现实滚动条
                title: "文件", //不显示标题
                content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                cancel: function () {
                    //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
                }
            });
        }

后台处理：

其中的"pr://LPinformation/" 是我提前在系统以及定义好了图片存放路径和读取路径的这个可以改为自己想要的路径，最终就是要能找到图片地址就可以了

public void showImg(HttpServletRequest request, HttpServletResponse response) throws Exception {
        String imgFile = request.getParameter("imgFile"); //文件名
        FileObject path = VFSManager.getFileSystemManager().resolveFile("pr://LPinformation/");
        File lookpath = new File(path.getURL().toURI());
        String imgpath = lookpath.toString();//这里是存放图片的文件夹地址
        FileInputStream fileIs = null;
        try {
            fileIs = new FileInputStream(imgpath + "/" + imgFile);
            logger.debug("找到" + imgpath + "/" + imgFile);
        } catch (Exception e) {
            logger.error("系统找不到图像文件：" + imgpath + "/" + imgFile);
            fileIs.close();
            return;
        }
        int i = fileIs.available(); //得到文件大小
        byte data[] = new byte[i];
        fileIs.read(data);  //读数据
        response.setContentType("image/*"); //设置返回的文件类型
        OutputStream outStream = response.getOutputStream(); //得到向客户端输出二进制数据的对象
        outStream.write(data);  //输出数据
        System.out.println(data);
        outStream.flush();
        outStream.close();
        fileIs.close();
    }

 

效果：

 

我这里没有做对图片的比例转换，如果是图片大于设定的宽度，肯定显示出来就会很丑了，所以我也简单的做了一个按比例显示的弹出

 $(function () {
          $(".display").click(function () {
            var _this=$(this);
            imgShow("#photo", "#innerdiv", "#bigimg", _this);
          });
       });

       function imgShow(photo, innerdiv, bigimg, _this){
           var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
           $(bigimg).attr("src", src);//设置#bigimg元素的src属性

           /!*获取当前点击图片的真实大小，并显示弹出层及大图*!/
           $("<img/>").attr("src", src).load(function(){
               var windowW = 650;//获取当前窗口宽度
               var windowH =650;//获取当前窗口高度
               var realWidth = this.width;//获取图片真实宽度
               var realHeight = this.height;//获取图片真实高度
               var imgWidth, imgHeight;
               var scale = 1.0;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放

               if(realHeight>windowH*scale) {//判断图片高度
                   imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放
                   imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
                   if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
                       imgWidth = windowW*scale;//再对宽度进行缩放
                   }
               } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度
                   imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放
                   imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
               } else {//如果图片真实高度和宽度都符合要求，高宽不变
                   imgWidth = realWidth;
                   imgHeight = realHeight;
               }
               $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放

               var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
               var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
               $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
               $(photo).fadeIn("fast");//淡入显示#outerdiv及.pimg
           });

           $(photo).click(function(){//再次点击淡出消失弹出层
               $(this).fadeOut("fast");
           });
       }

<div id="photo">
<div id="innerdiv" style="position:absolute;">
    <img id="bigimg"  src="" />
</div></div>
<img  class="disPlay" src="${ctxStatic}/bns/images/1.png"  alt="" />

稍微改了写法，不过道理是一样的