上传后显示（两种）

（三）上传后显示：

 

 

1，上传后用js从上传控件获取数据显示，用于时时看效果不必保存图片后再从磁盘拿

<label>上传图片：</label> <span><input type="file"

style="width: 240px; border: none;" accept=".jpg,.gif,.png,.bmp"

name="picture" value="${vo.picture_address}"

onchange="previewImage(this,'preview','imghead')" /></span> <br>//页面上控件拿

<div id="preview">

<img id="imghead"

src="${pageContext.request.contextPath}${vo.picture_address}"

alt="" style="cursor: pointer; width: 100%;" />//磁盘拿

</div>

 

function previewImage(file, preview, imghead) {

var MAXWIDTH = 260;

var MAXHEIGHT = 180;

var div = document.getElementById(preview);

if (file.files && file.files[0]) {

div.innerHTML = "<img id='"+imghead+"'>";

var img = document.getElementById(imghead);

img.onload = function() {

var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT,

img.offsetWidth, img.offsetHeight);

img.width = rect.width;

img.height = rect.height;

//         img.style.marginLeft = rect.left+'px';

img.style.marginTop = rect.top + 'px';

}

var reader = new FileReader();

reader.onload = function(evt) {

img.src = evt.target.result;

}

reader.readAsDataURL(file.files[0]);

} else //兼容IE

{

var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';

file.select();

var src = document.selection.createRange().text;

div.innerHTML = "<img id='"+imghead+"'>";

var img = document.getElementById(imghead);

img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;

var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth,

img.offsetHeight);

status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width

+ ',' + rect.height);

div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\'></div>";

}

}

function clacImgZoomParam(maxWidth, maxHeight, width, height) {

var param = {

top : 0,

left : 0,

width : width,

height : height

};

if (width > maxWidth || height > maxHeight) {

rateWidth = width / maxWidth;

rateHeight = height / maxHeight;

 

if (rateWidth > rateHeight) {

param.width = maxWidth;

param.height = Math.round(height / rateWidth);

} else {

param.width = Math.round(width / rateHeight);

param.height = maxHeight;

}

}

 

param.left = Math.round((maxWidth - param.width) / 2);

param.top = Math.round((maxHeight - param.height) / 2);

return param;

}

2，上传后从后台显示，需要保存后再从磁盘拿

@RequestMapping(value = "/system/tbBasBed/showImage")

   public void showReportImage(@RequestParam(value = "imageType") String imageType,

                               @RequestParam(value = "id") String id,

                               HttpServletRequest request,HttpServletResponse response) throws IOException, NumberFormatException, EsteelException {

//             response.setContentType("image/jpeg");

 

           response.setCharacterEncoding("UTF-8");

//        String filePath= WebConfig.get("filePath");

           String path = WebConfig.get("filePath") ;

       File file=null;

       TbBasBed currbasBed = new TbBasBed();

currbasBed.setWare_key(id);

currbasBed= tbBasBedService.getBasBedById(Integer.valueOf(id+""));

       if(currbasBed!=null){

           if("bas".equals(imageType)&&currbasBed.getPicture_address()!=null){

           file=new File(path+currbasBed.getPicture_address());

           }

       }

       if( file==null||!file.exists()){

               response.getWriter().print("未找到图片");

       }else {

           response.setContentType("image/jpeg");

           FileInputStream fos = new FileInputStream(file);

           byte[] bytes = new byte[1024*1024];

           int length = 0;

           while((length=fos.read(bytes))!=-1){

               response.getOutputStream().write(bytes,0,length);

           }

       }

   }