SpringMVC从本地磁盘读取图片显示到JSP页面上

冷不防 2022-08-06 15:04 233阅读 0赞

上一篇博客是从数据库中读取图片的二进制信息流然后显示到JSP页面上，下面是将图片存储到我的本地磁盘E中，然后在数据库中只存图片的名字  
将磁盘的路径写到配置文件中，从配置文件中将地址读取出来，图片显示的流程与前一篇博客的一样，只不过图片存储的地方不一样。

下面来展示我的实现流程.

### **（1）**数据库中只保存图片的id和名字，我用的是oracle数据库，id是自增的，至于如何建表实现id自增等，我已经有博客介绍过这个，这里我展示下我自己写了一个工具类用来建表. ###

<span style="font-family:Comic Sans MS;">public class CreTableUtil {
    	/**
    	 * 
    	 * @param tableName
    	 * 创建表
    	 */
    	public void create(String tableName,JdbcTemplate jdbcTemplate){
    		jdbcTemplate.execute("create table "+tableName+"(photo_id int,photo_data blob,photo_name varchar2(100),primary key(photo_id))");
    	}
    	/**
    	 * 
    	 * @param seq
    	 * 创建序列
    	 */
    	public void createSequence(String seq,JdbcTemplate jdbcTemplate){
    		String create_seq="create sequence "+seq +" start with 1 "
    				+ "increment by 1 minvalue 1 maxvalue 999999 nocycle nocache";
    		jdbcTemplate.execute(create_seq);
    	}
    	/**
    	 * 为id设置自增
    	 */
    	
    	public void idIncrement(String tablename,String seq,JdbcTemplate jdbcTemplate){
    		String sql="insert into "+ tablename+"(photo_id) values("+seq+".NEXTVAL)";
    		jdbcTemplate.execute(sql);
    	}
    	/**
    	 * 创建触发器
    	 */
    	public void create_trigger(String tablename,String seq,String triggerName,JdbcTemplate jdbcTemplate){
    		String creat_trig="create  trigger "+triggerName+" before insert on "+tablename+" for each row begin select "+seq+".NEXTVAL into :new.photo_id from dual;end;";
    		jdbcTemplate.execute(creat_trig);
    	}
    	
    }</span>

### 2）使用mybatis的generatorConfig.xml自动生成DAO类，至于生成过程我在之前也已经介绍过了。         最后生成的 PhotoModel类如下： ###

<span style="font-family:Comic Sans MS;">public class PhotoModel {
        private BigDecimal id;
        private String name;
        public BigDecimal getId() {
            return id;
        }
        public void setId(BigDecimal id) {
            this.id = id;
        }
        public String getName() {
            return name;
        }
        public void setName(String name) {
            this.name = name;
        }
    }</span>

#### PhotoModelDAO如下： ####

<span style="font-family:Comic Sans MS;">public interface PhotoModelDAO {
        int deleteByPrimaryKey(BigDecimal id);
    
        int insert(PhotoModel record);
    
        int insertSelective(PhotoModel record);
    
        PhotoModel selectByPrimaryKey(BigDecimal id);
    
        int updateByPrimaryKeySelective(PhotoModel record);
    
        int updateByPrimaryKey(PhotoModel record);
    }</span>

#### 自己创建的Service接口 ：IPhotoModelService ####

<span style="font-family:Comic Sans MS;">public interface IPhotoModelService {
    	int insert(String pName);
    	public PhotoModel getPhotoById(BigDecimal photoId);
    }</span>

#### Service实现类如下： ####

<span style="font-family:Comic Sans MS;">@Service("photoModelService")
    public class PhotoModelServiceImpl implements IPhotoModelService{
    
    	@Resource
    	PhotoModelDAO photoModelDAO;
    	public int insert(String pName) {
    		PhotoModel pm=new PhotoModel();
    		pm.setName(pName);
    		return photoModelDAO.insert(pm);
    	}
    
    	public PhotoModel getPhotoById(BigDecimal photoId) {
    		return photoModelDAO.selectByPrimaryKey(photoId);
    	}
    }</span>

### （3）将图片输出到JSP页面上和将数据库读出出来的信息转换成json字符串传递到前台 ###

<span style="font-family:Comic Sans MS;">@Controller
    @Configuration
    @ImportResource("classpath:spring.xml")
    @RequestMapping("/showPicture")
    public class PhotoModelController extends HttpServlet{
    	 private static final long serialVersionUID=95163763702302821L;
    	 @Value("${picUrl}")
    	 private  String picUrl;
    	 @Resource
    	 private IPhotoModelService photoModelService;
    	 
    	 @RequestMapping("/toPicShow")
    	 public String toPicShow(){
    		 return "waterfullPic";
    	 }
    	 
    	 
    	 //根据请求的路径中的参数id,从本地磁盘中读取图片，picUrl是从配置文件中读取出来的
    	 @RequestMapping("/tofindPic")
    	 public void picToJSP(@PathParam("id")int id,HttpServletRequest request,HttpServletResponse response){
    		 PhotoModel photoModel=photoModelService.getPhotoById(new BigDecimal(id));
    		 String photoName=photoModel.getName();
    		 FileInputStream in;
    		 response.setContentType("application/octet-stream;charset=UTF-8");
    		 try {
    			 //图片读取路径
    			//in=new FileInputStream("E:\\picture\\"+photoName);
    			<strong><span style="color:#cc0000;">in=new FileInputStream(picUrl+photoName);</span></strong>
    			int i=in.available();
    			byte[]data=new byte[i];
    			in.read(data);
    			in.close();
    			
    			//写图片
    			OutputStream outputStream=new BufferedOutputStream(response.getOutputStream());
    			outputStream.write(data);
    			outputStream.flush();
    			outputStream.close();
    		} catch (Exception e) {
    			// TODO Auto-generated catch block
    			e.printStackTrace();
    		}
    		 
    	 }
    	 
    	//从数据库中读取信息转换成json格式传递到前台
         @RequestMapping("/picToJsonReturn.do")
         @ResponseBody
         public String picToJsonReturn(HttpServletRequest request,Model model){
        	 System.out.println("aaaaa");
        	 JSONArray jsonArray=new JSONArray();
     		for(int i=10;i<31;i++){
     			PhotoModel p=photoModelService.getPhotoById(new BigDecimal(i));
     			jsonArray.add(p);
     		}
     		return jsonArray.toString();
         }
    }
    </span>

### （4）前台页面显示图片 ###

#### waterfull.js代码如下： ####

<span style="font-family:Comic Sans MS;">window.οnlοad=function(){/*当页面加载的时候调用函数*/
       setInterval(function(){window.onscroll   = sscroll();},1000);
    	waterfall('main','pin');
    	
    	window.οnscrοll=sscroll();
    }
    /*之前将函数写在里面时一直实现不了，现在这样写在外面便可以了。*/
    
    function sscroll(){
    	var pic;//原来要把变量定义在这里，之前定义在外面，就会出现undefined的错误
    	$.ajax({
    		async:false,
    		type:'get',//get是获取数据，post是带数据的向服务器发送请求
    		//url:'addAction.do',
    		url:'picToJsonReturn.do',
    		dataType:'json',
    		success:function(data){
    			pic=eval(data);//转换成js对象
    		},
    		error:function(data){
    			alert("JSON数据获取失败，请联系管理员！");
    		}
    	});
    	
    	
    	var dataInt={'data':[{'src':'img1.jpg'},{'src':'img2.jpg'},{'src':'img3.jpg'},{'src':'img4.jpg'},{'src':'img5.jpg'},{'src':'img6.jpg'}]};
    	if(checkscrollside()){
    			var oParent=document.getElementById('main');
    			for(var i=0;i<pic.length;i++){
    				var oPin=document.createElement('div');//添加元素节点
    				oPin.className='pin';
    				oParent.appendChild(oPin);
    				var oBox=document.createElement('div');
    				oBox.className='box';
    				oPin.appendChild(oBox);
    				var oImg=document.createElement('img');
    				//oImg.src='/Login_ssm_mav_picbyte/static/pic/'+dataInt.data[i].src;
    				//oImg.src=src='/Login_ssm_mav_picbyte/user/toLookImage?id='+pic[i].photoId;
    				oImg.src=src='/Login_ssm_mav_picbyte/showPicture/tofindPic?id='+pic[i].id;
    				//oImg.src='http://localhost:9988/pic/'+pic[i].photoName;
    				oBox.appendChild(oImg);
    			}
    			waterfall('main','pin');
    }
    }
    function waterfall(parent,pin){
    
        var oParent=document.getElementById(parent);//父级对象
        var aPin=getClassObj(oParent,pin);//获取存储pin的数组的pin
        var iPinW=aPin[0].offsetWidth;//一个块框pin的宽
        var num=Math.floor(document.documentElement.clientWidth/iPinW);//每行中能容纳的pin的个数[窗口的宽度除以一个块框的宽度]
        oParent.style.cssText='width:'+iPinW*num+'px;margin:0 auto;';//设置父级居中样式:定宽+自动水平外边距
    
         var pinHArr=[];//用于存储没列中的所有块框相加的高度
         for(var i=0;i<aPin.length;i++){
         	var pinH=aPin[i].offsetHeight;
         	if(i<num){
         		pinHArr[i]=pinH;//第一行中的num个块框pin先添加进数组pinHrr
         	}else{
         		var minH=Math.min.apply(null,pinHArr);//数组pinHArr中的最小值
         		var minHIndex=getminHIndex(pinHArr,minH);//获取高度最小的pin的index
         		aPin[i].style.position='absolute';//设置绝对偏移
         	    aPin[i].style.top=minH+'px';
         	    aPin[i].style.left=aPin[minHIndex].offsetLeft+'px';
                pinHArr[minHIndex]+=aPin[i].offsetHeight;//更新添加了快框后的列高
         	}
         }
    }   
    
    //获取高度最小的pin 的index
    function getminHIndex(arr,minH){
    	for(var i in arr){
    		if(arr[i]==minH){
    			return i;
    		}
    	}
    }
    
    /*通过父级和子元素的class名称获取该同类子元素的数组*/
    function getClassObj(parent,className){
    	var obj=parent.getElementsByTagName('*');//获取父类元素的所有子元素
    	var pinS=[];//创建一个数组，用于收集子元素
    	for(var i=0;i<obj.length;i++){//遍历子元素,判断类别，压入数组
    		if(obj[i].className==className){
    			pinS.push(obj[i]);
    		}
    	}
    	return pinS;
    }
    
    function checkscrollside(){
    	var oParent=document.getElementById('main');
    	var aPin=getClassObj(oParent,'pin');
    	var lastPinH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2);
    	//创建【触发添加块框的的函数waterfall()】的高度:最后一个块框的与网页顶部的距离+自身高的一半(未滚到底便开始加载)
        
        //网页中获取滚动条卷去部分的高度
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        var documentH=document.documentElement.clientHeight;//页面高度
        return (lastPinH<scrollTop+documentH)?true:false;//到达指定高度后返回true,触发waterfall（）函数
    }</span>

到这里我的瀑布墙图片展示基本算是完成了，不知道还有没有更好的处理图片的方法。