Servlet+JSP+javaScrip实现图片上传回显

QingyunChen

已于 2023-03-20 21:13:40 修改

阅读量657

点赞数

分类专栏： java 文章标签： servlet java 前端

于 2023-03-13 22:26:59 首次发布

本文链接：https://blog.csdn.net/piaoyunlive/article/details/129509116

版权

java 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

Servlet+JSP+javaScrip实现图片上传回显

一、导入必要的jar包

<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>1.3.2</version>
</dependency>
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.2</version>
</dependency>

二、web.xml servlet配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xmlns="http://java.sun.com/xml/ns/javaee"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
        http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
         id="WebApp_ID" version="2.5">
    <servlet>
        <display-name>UploadServlet</display-name>
        <servlet-name>UploadServlet</servlet-name>
        <servlet-class>pub.qingyun.UploadServlet01</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>UploadServlet</servlet-name>
        <url-pattern>/UploadServlet</url-pattern>
    </servlet-mapping>
</web-app>

三、JSP页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="/js/jquery-2.1.1.min.js"></script>
    <style type="text/css">
        .warp {
            display: inline-block;
            vertical-align: bottom;
            position: relative;

        }
        .warp-content {
            border: 1px solid red;
            width: 150px;
            height: 150px;
            line-height: 150px;
            text-align: center;
        }
        input {
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid red;
            width: 150px;
            height: 150px;
            opacity: 0;
            cursor: pointer;
        }
        img {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            margin-top: 50px;
            vertical-align: bottom;
        }
    </style>
</head>
<body>
<div class="fileBox">
    <div class="warp">
        <span class="warp-content">点击上传</span>
        <input type="file" id="fileupload" class="form-control" accept=".jpg,.png,.jpeg,.bmp"/>
    </div>
    <img id="img" src="" onerror="this.src='/img/profile.jpg'"/>
</div>
<script type="text/javascript">
    var image = document.getElementById("img");
    $("#fileupload").on("change", function () {
        var file = this.files[0];
        var data = new FormData();
        data.append("file", file);
        var reader = new FileReader();
        reader.readAsDataURL(file);//异步读取文件内容，结果用data:url的字符串形式表示
        /*当读取操作成功完成时调用*/
        reader.onload = function (e) {
            $.ajax({
                type: "post",
                url: "/UploadServlet",
                data: data,
                contentType: false,
                //默认文件类型application/x-www-form-urlencoded  设置之后multipart/form-data
                processData: false,
                // 默认情况下会对发送的数据转化为对象 不需要转化的信息
                success: function (res) {
                    if (res === "SUCCESS") {
                        console.log("res:" + res);
                        image.setAttribute("src", reader.result);
                        alert("图片上传成功!")
                    } else {
                        alert("图片上传失败!")
                    }
                }
            });
        }
    })
</script>
</body>
</html>

三、uploadServlet JAVA代码

package pub.qingyun;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

/**
 * @Author CQY
 * @Date 2023/3/13 20:51
 * @Version 1.0
 **/
public class UploadServlet01 extends HttpServlet {

    private static final long serialVersionUID = 1L;

    // 上传文件存储目录
    private static final String UPLOAD_DIRECTORY = "upload";

    // 上传配置
    private static final int MEMORY_THRESHOLD = 1024 * 1024 * 3;  // 3MB
    private static final int MAX_FILE_SIZE = 1024 * 1024 * 40; // 40MB
    private static final int MAX_REQUEST_SIZE = 1024 * 1024 * 50; // 50MB

    /**
     * 上传数据及保存文件
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        try (PrintWriter writer = response.getWriter()) {
            response.setContentType("text/html;charset=UTF-8");
            // 检测是否为多媒体上传
            if (!ServletFileUpload.isMultipartContent(request)) {
                // 如果不是则停止
                writer.println("Error: 表单必须包含 enctype=multipart/form-data");
                writer.flush();
                return;
            }

            // 配置上传参数
            DiskFileItemFactory factory = new DiskFileItemFactory();
            // 设置内存临界值 - 超过后将产生临时文件并存储于临时目录中
            factory.setSizeThreshold(MEMORY_THRESHOLD);
            // 设置临时存储目录
            factory.setRepository(new File(System.getProperty("java.io.tmpdir")));

            ServletFileUpload upload = new ServletFileUpload(factory);

            // 设置最大文件上传值
            upload.setFileSizeMax(MAX_FILE_SIZE);

            // 设置最大请求值 (包含文件和表单数据)
            upload.setSizeMax(MAX_REQUEST_SIZE);

            // 中文处理
            upload.setHeaderEncoding("UTF-8");

            // 构造临时路径来存储上传的文件
            // 这个路径相对当前应用的目录
            String uploadPath = request.getServletContext().getRealPath("./") + File.separator + UPLOAD_DIRECTORY;

            // 如果目录不存在则创建
            File uploadDir = new File(uploadPath);
            if (!uploadDir.exists()) {
                uploadDir.mkdir();
            }
            // 解析请求的内容提取文件数据
            List<FileItem> formItems = upload.parseRequest(request);
            if (formItems != null && formItems.size() > 0) {
                // 迭代表单数据
                for (FileItem item : formItems) {
                    // 处理不在表单中的字段
                    if (!item.isFormField()) {
                        String fileName = new File(item.getName()).getName();
                        String filePath = uploadPath + File.separator + fileName;
                        File storeFile = new File(filePath);
                        // 在控制台输出文件的上传路径
                        System.out.println(filePath);
                        // 保存文件到硬盘
                        item.write(storeFile);
                        writer.write("SUCCESS");// 输出信息
                        writer.flush();
                    }
                }
            }
        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }
}