ssm实现图片预览

相信大家都在各大网站上都见到过图片预览的功能吧，今天我们就来做一做图片预览的简单小案例。
首先我们先导入jar依赖，可以参照SSM文件上传中的jar依赖。这里就不重复说明了。
由于只简单的小案例，我们这里就不连接数据库了，但是原理上是一样的。首先就是页面上的代码，只是简单的预览即可。
代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ page isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>图片的预览</title>
</head>
<body>
<form action="${pageContext.request.contextPath }/file2/yulan" method="get">
    <input type="hidden" name="lj" value="1.png">
    <input type="submit" value="预览">
</form>
</body>
</html>

对应的效果如图：
在这里插入图片描述
其中的代码含义相信我不解释大家都明白了，接下来便是核心了。
接下来要做的事情便是获取需要预览文件所在的位置了。由于是简单的小案例，所以就没有利用数据库来取出它的路径，一般来说，数据库里是存有图片所在的路径的，因为是小案例，所有便直接在控制层里手动的获取其路径。对应代码如下：

 //获取文件名称
String name = request.getParameter("lj");

//获取对应文件的路径
String path = request.getServletContext().getRealPath("/imgs") + "/" + name;

其中利用隐藏域来获取图片的名称，然后再获取其路径。图片对应的程序位置如图：
在这里插入图片描述
由页面的代码可以看出我需要预览的图片是1.png。所以第一步便只需得到其路径即可。
接下来便是需要得到图片的格式了，因为图片有各种各样的格式，只有得到其正确的格式才能显示出来。

//获取到图片格式
String format = path.substring(path.lastIndexOf(".")+1);

最后只需要把对应的图片在网页上“读”出来就行了。

File file = new File(path);
try {
     //读取图片文件流
     BufferedImage image= ImageIO.read(new FileInputStream(file));
     //将图片写到输出流
     ImageIO.write(image, format, response.getOutputStream());
 } catch (IOException e) {
     e.printStackTrace();
 }

这样子一来便大功告成了。
完整的控制层代码如下：

@GetMapping("/yulan")
    public void yulan(HttpServletRequest request,HttpServletResponse response){
        //获取文件名称
        String name = request.getParameter("lj");

        //获取对应文件的路径
        String path = request.getServletContext().getRealPath("/imgs") + "/" + name;

        //获取到图片格式
        String format = path.substring(path.lastIndexOf(".")+1);
        File file = new File(path);
        try {
            //读取图片文件流
            BufferedImage image= ImageIO.read(new FileInputStream(file));
            //将图片写到输出流
            ImageIO.write(image, format, response.getOutputStream());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

最后便是点击预览后的效果
在这里插入图片描述
由于这个不是很难，代码也是很简短，所以需要自己好好的练习，多练习几遍，相信大家很快就能够掌握了。

猜你喜欢