JSP中图片的上传与显示方法实例详解-Java开发

下面就为大家详细讲解一下“JSP中图片的上传与显示方法实例详解”的完整攻略。

下面就为大家详细讲解一下“JSP中图片的上传与显示方法实例详解”的完整攻略。

1. 确认上传的文件类型

在上传图片前，我们需要确认上传的文件类型，以防止一些不合法的文件被上传。可以通过以下代码片段实现：

String fileName = fileItem.getName();
String extName = fileName.substring(fileName.lastIndexOf(".")+1);
if (extName.equals("jpg") || extName.equals("jpeg") || extName.equals("gif") || extName.equals("png")) {
    // 文件类型合法
} else {
    // 文件类型不合法
}

2. 将图片上传到服务器

在文件类型确认后，我们需要将图片上传到服务器。可以通过以下代码片段实现：

// 获取上传路径
String path = getServletContext().getRealPath("/upload");
// 创建上传路径目录
File uploadDir = new File(path);
if (!uploadDir.exists()) {
    uploadDir.mkdirs();
}
// 创建File对象，接收上传的文件
File uploadFile = new File(path + "/" + fileName);
// 写入文件
fileItem.write(uploadFile);
// 释放资源
fileItem.delete();

3. 显示上传的图片

在图片上传到服务器后，我们需要将其显示在网页上。可以通过以下代码片段实现：

<img src="<%=request.getContextPath()%>/upload/<%=fileName%>" alt="上传的图片">

示例1：上传一张图片并显示

以下示例演示了如何上传一张图片并显示：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.io.*,java.util.*,org.apache.commons.fileupload.*,org.apache.commons.fileupload.disk.*" %>
<%@ page import="org.apache.commons.fileupload.servlet.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上传图片</title>
</head>
<body>
    <form action="upload.jsp" method="post"
        enctype="multipart/form-data">
        请选择您要上传的文件：<input type="hidden" name="MAX_FILE_SIZE"
            value="1048576"> <input type="file" name="upfile"><br> <br> <input
            type="submit" value="上传图片">
    </form>
</body>
</html>

在upload.jsp文件中，我们可以通过以下代码片段实现图片上传和显示：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.io.*,java.util.*,org.apache.commons.fileupload.*,org.apache.commons.fileupload.disk.*" %>
<%@ page import="org.apache.commons.fileupload.servlet.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上传图片</title>
</head>
<body>
    <%
        // 获取上传目录
        String path = getServletContext().getRealPath("/upload");
        // 获取文件上传器
        DiskFileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload upload = new ServletFileUpload(factory);

        String fileName = "";
        try {
            // 解析request
            List<FileItem> items = upload.parseRequest(request);
            for (FileItem item : items) {
                // 判断是否是上传组件
                if (item.isFormField()) {
                    continue;
                }
                // 获取上传文件名
                fileName = item.getName();
                // 确认上传文件类型
                String extName = fileName.substring(fileName.lastIndexOf(".")+1);
                if (extName.equals("jpg") || extName.equals("jpeg") || extName.equals("gif") || extName.equals("png")) {
                    // 创建上传目录
                    File uploadDir = new File(path);
                    if (!uploadDir.exists()) {
                        uploadDir.mkdirs();
                    }
                    // 上传文件
                    File uploadFile = new File(path + "/" + fileName);
                    item.write(uploadFile);
                    item.delete();
                } else {
                    out.println("<script>alert('只允许上传jpg、png、gif格式的图片！');history.back();</script>");
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
            out.println("上传失败！");
        }
    %>

    <img src="<%=request.getContextPath()%>/upload/<%=fileName%>" alt="上传的图片">
</body>
</html>

示例2：上传多张图片并显示

以下示例演示了如何上传多张图片并显示：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.io.*,java.util.*,org.apache.commons.fileupload.*,org.apache.commons.fileupload.disk.*" %>
<%@ page import="org.apache.commons.fileupload.servlet.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上传多张图片</title>
</head>
<body>
    <form action="upload.jsp" method="post"
        enctype="multipart/form-data">
        请选择您要上传的文件：<input type="hidden" name="MAX_FILE_SIZE"
            value="1048576"> <input type="file" name="upfile"><br> <br> 请选择您要上传的文件：<input type="hidden" name="MAX_FILE_SIZE"
            value="1048576"> <input type="file" name="upfile"><br> <br> <input
            type="submit" value="上传图片">
    </form>
</body>
</html>

在upload.jsp文件中，我们可以通过以下代码片段实现多张图片上传和显示：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.io.*,java.util.*,org.apache.commons.fileupload.*,org.apache.commons.fileupload.disk.*" %>
<%@ page import="org.apache.commons.fileupload.servlet.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>上传多张图片</title>
</head>
<body>
    <%
        // 获取上传目录
        String path = getServletContext().getRealPath("/upload");
        // 获取文件上传器
        DiskFileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload upload = new ServletFileUpload(factory);

        String[] fileNames = new String[2];
        int i = 0;
        try {
            // 解析request
            List<FileItem> items = upload.parseRequest(request);
            for (FileItem item : items) {
                // 判断是否是上传组件
                if (item.isFormField()) {
                    continue;
                }
                // 获取上传文件名
                String fileName = item.getName();
                // 确认上传文件类型
                String extName = fileName.substring(fileName.lastIndexOf(".")+1);
                if (extName.equals("jpg") || extName.equals("jpeg") || extName.equals("gif") || extName.equals("png")) {
                    // 创建上传目录
                    File uploadDir = new File(path);
                    if (!uploadDir.exists()) {
                        uploadDir.mkdirs();
                    }
                    // 上传文件
                    File uploadFile = new File(path + "/" + fileName);
                    item.write(uploadFile);
                    item.delete();
                    fileNames[i++] = fileName;
                } else {
                    out.println("<script>alert('只允许上传jpg、png、gif格式的图片！');history.back();</script>");
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
            out.println("上传失败！");
        }
    %>

    <img src="<%=request.getContextPath()%>/upload/<%=fileNames[0]%>" alt="上传的图片1">
    <img src="<%=request.getContextPath()%>/upload/<%=fileNames[1]%>" alt="上传的图片2">
</body>
</html>

通过以上两个示例，我们可以详细了解到JSP中图片的上传与显示方法实例，希望可以对大家有所帮助。