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);