SpringBoot+jQuery的viewer.js实现预览本地图片功能

1.使jQuery的Viewer图像查看插件，首先需要引入viewer的js,css

2.读取本地图片，一般本地图片的路径保存在数据库里面，所以需要查询数据库获取图片的存放路径，然后在根据路径读取图片

$("#sucaihuo").append("<li><img id='imgs' data-original="+row.file+" src='/user/fileEcho?id="+row.id+"' width='100px' height='80px'></li>");
$("#imgs").click(function(){
    $("#sucaihuo").viewer("data-original");
})

<img>标签里面的src是指请求后台的路径，?后面的内容是拼接需要上传的参数，这样就会进到后台并将参数传给后台

@ResponseBody
@RequestMapping(value = "/user/fileEcho", method = RequestMethod.GET)
public void  fileEcho(HttpServletResponse response, @RequestParam int id) throws IOException {
    User user = userService.findByid(id);
      //获取图片存放路径
    String filePath = user.getFile();
    if(filePath!=null){
        try{
            FileInputStream fis = new FileInputStream(filePath); // 以byte流的方式打开文件 d:\1.gif
            int i=fis.available(); //得到文件大小
            byte data[]=new byte[i];
            fis.read(data);  //读数据
            response.setContentType("multipart/form-data");
            response.setContentType("image/*"); //设置返回的文件类型
            OutputStream toClient=response.getOutputStream(); //得到向客户端输出二进制数据的对象
            toClient.write(data);  //输出数据
            toClient.flush();
            toClient.close();
            fis.close();
        }catch(Exception e){
            e.printStackTrace();
            System.out.println("图片不存在");
        }
    }
}

3.后台读取图片后，会将图片返回到页面，当点击图片时触发click时间，进行放大图片

$("#imgs").click(function(){
    $("#sucaihuo").viewer("data-original");
})

SpringBoot+jQuery的viewer.js实现预览本地图片功能

猜你喜欢