java IO流读取图片供前台显示

         国网内网OA项目终于告一段落，回顾项目开发过程中深刻体会，莫过于国网可研，需求规格说明书，业务需求说明书，概要设计说明书都过了评审，但客户还是时不时提出新需求，这不最近又提出一个护签管理（顾名思义就是护照管理和签证管理的统称），其中有一个需要上传图片问题，如果单纯的jsp可能问题不大，但国网项目前端框架MX-Frameworkment（一种容器类框架），就有一点不好直接如网上展示了。但万变不离其宗，图片上传包括两部分，一部分是图片上传到服务器的某一个位置（或者上传的数据库，但由于图片上传量不大，用户最大并发数才50所以就直接上传到服务器的某个目录下），另一部分是当用户点击编辑时，显示你所上传的图片

图片点击上传

/**
 *图片在线预览方法 
 */
function setImagePreview() {
    var docObj = document.getElementById("importFile");
    var imgObjPreview = document.getElementById("preview");
    if (docObj.files && docObj.files[0]) { //火狐下，直接设img属性                      
        imgObjPreview.style.display = 'block';
        imgObjPreview.style.width = '120px';
        imgObjPreview.style.height = '112px';
        //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 imgSrc =  document.getElementById("importFile").value;
        var localImagId = document.getElementById("localImag"); //必须设置初始大小                     
        localImagId.style.width = "120px";
        localImagId.style.height = "112px"; //图片异常的捕捉，防止用户修改后缀来伪造图片
        localImagId.style.position = "absolute";
        localImagId.style.left = "381px";
        localImagId.style.top = "20px";
        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;
}

图片编辑预览

图片编辑预览一般用IO流读取图片供前台显示

后台代码：

/** 
     * IO流读取图片 by:long 
     * @return 
     */  
    @RequestMapping(value = "/IoReadImage/{imgName}", method = RequestMethod.GET)  
    public String IoReadImage(@PathVariable String imgName,HttpServletRequest request,HttpServletResponse response) throws IOException {  
        ServletOutputStream out = null;  
        FileInputStream ips = null;  
        try {  
            //获取图片存放路径  
            String imgPath = Constans.FOLDER_IMAGE + imgName;  
            ips = new FileInputStream(new File(imgPath));  
            response.setContentType("multipart/form-data");  
            out = response.getOutputStream();  
            //读取文件流  
            int len = 0;  
            byte[] buffer = new byte[1024 * 10];  
            while ((len = ips.read(buffer)) != -1){  
                out.write(buffer,0,len);  
            }  
            out.flush();  
        }catch (Exception e){  
            e.printStackTrace();  
        }finally {  
            out.close();  
            ips.close();  
        }  
        return null;  
    }  

前台代码 - 方式一:

<span style="white-space:pre">  </span><div style="float: left;">  
          <#--${model.userDatil.photo} 为数据库存放的文件名称-->  
          <img src="${ctx}/userInfo/IoReadImage/${model.userDatil.photo}" id="npcImg" width="125" height="148"/>  
          <input type="hidden" id="photo" name="photo"/>  
        </div>  

js代码 - 方式二:

var npcName = $('#npcImg').data('val');  
var img = document.getElementById("npcImg");  
img.src = '/userInfo/IoReadImage/'+npcName;  

jQuery代码 - 方式三:

$('#npcImg').attr('src','/userInfo/IoReadImage/'+npcName);