### 实现
JSP 页面随机
显示本地存储
图片
为了实现在
JSP 页面中从服务器
本地文件夹随机选择并
显示图片的功能，可以通过以下方式完成：
#### 1. 获取
图片列表
首先，在 Java 后端获取目标文件夹中的所有
图片文件。这一步骤通常放在 Servlet 中处理。
```java
import java.io.File;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.ArrayList;
import java.util.List;
@WebServlet("/RandomImageServlet")
public class RandomImageServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<String> imagePaths = getImageList();
if (!imagePaths.isEmpty()) {
int randomIndex = (int)(Math.random() * imagePaths.size());
String imagePath = imagePaths.get(randomIndex);
// 将路径设置为请求属性以便于在
JSP页面访问
request.setAttribute("randomImagePath", imagePath);
RequestDispatcher dispatcher = getServletContext().getRequestDispatcher("/showImage.
jsp");
dispatcher.forward(request, response);
} else {
response.getWriter().println("No images found.");
}
}
private List<String> getImageList(){
List<String> paths = new ArrayList<>();
File folder = new File(getServletContext().getRealPath("/images")); //
图片所在文件夹相对路径[^2]
for (final File fileEntry : folder.listFiles()){
if(fileEntry.isFile() && isSupportedFormat(fileEntry.getName())){ // 判断是否支持的格式
paths.add(fileEntry.getAbsolutePath()); // 添加绝对路径到集合中
}
}
return paths;
}
private boolean isSupportedFormat(String fileName){
// 支持JPEG/JPG/PNG/BMP/GIF等常见图像格式
String[] supportedFormats = {"jpg","jpeg","png","bmp","gif"};
for(String format:supportedFormats){
if(fileName.toLowerCase().endsWith(format)){
return true;
}
}
return false;
}
}
```
此代码片段展示了如何创建一个 `RandomImageServlet` 来读取特定目录下的所有
图片，并从中随机挑选一张作为返回给前端展示的内容。
#### 2.
显示选定的
图片
接着，在名为 `showImage.
jsp` 的
JSP 文件里编写 HTML 和 EL 表达式来呈现这张被选中的
图片。
```
jsp
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Show Image</title>
<style type="text/css">
img{
max-width: 100%;
height:auto;
display:block;
margin-left:auto;
margin-right:auto;
border-radius:8px;
box-shadow:rgba(0,0,0,.298039) 0 1px 4px;
padding-top:2em;
}
</style>
</head>
<body>
<h2 style='text-align:center;'>Here's Your Random Picture:</h2>
<img src="${pageContext.request.contextPath}/getImage?path=${randomImagePath}" alt="Random Pic">
</body>
</html>
```
这里定义了一个简单的网页布局用于加载由 servlet 提供的随机
图片链接。注意这里的 img 标签内的 src 属性指向了一个新的 URL `/getImage?path=...`, 这意味着还需要额外的一个servlet 或者控制器方法专门用来响应这个 GET 请求并将实际的二进制数据流发送回客户端浏览器[^1]。
#### 3. 处理
图片输出至浏览器
最后，增加一个新的映射用于提供原始
图片资源的服务:
```java
@WebServlet("/getImage")
public class GetImageServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)throws ServletException,IOException{
String path=req.getParameter("path");
try(FileInputStream fis=new FileInputStream(path);OutputStream os=resp.getOutputStream();){
byte[] buffer=new byte[fis.available()];
while(fis.read(buffer)>0){
os.write(buffer);
}
} catch(Exception e){
throw new RuntimeException(e.getMessage(),e);
}
}
}
```
这段程序负责接收来自 showImage.
jsp 发起的 HTTP GET 请求，并根据传入参数定位对应的物理位置打开输入流，再将其内容逐字节复制到响应对象关联的输出流当中去，从而实现了向用户的浏览器传输完整的图形文件。
扫一扫
781
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
