servlet-上传文件

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.6.0.js"></script>
</head>
<body>
    <div>
        <input type="text" name="username" id="username">
        <input type="file" name="userface" id="userface">
        <button onclick="doUpload()">提交</button>
    </div>
    <img src="" alt="" id="myimg">
    <script>
        function doUpload() {
            let username = $("#username").val();
            let userfaceJs = $("#userface")[0];//转成js对象
            let files = userfaceJs.files;
            let file = files[0];
            let data = new FormData();
            data.append("username",username);
            data.append("userface",file);
            $.ajax({
                url: "/file/fileupload",
                type:"post",
                data:data,
                contentType:false, //取消数据类型自动转换
                processData: false,//禁止预处理
                success: function (data) {
                    $("#myimg").attr("src",data);
                }
            })
        }
    </script>
</body>
</html>

后端代码

package com.qfedu.demo;

import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;

@WebServlet(urlPatterns = "/fileupload")
@MultipartConfig(location = "D:\\temp")
public class FileUploadServlet extends HttpServlet {

    SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");

    /**
     * 由于文件是二进制内容，所以上传的文件需要放在请求体中，所以文件上传都是 post 请求
     *
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取用户名（文件上传请求中同时包含了其他参数）
        String username = req.getParameter("username");
        //获取用户上传的图像
        Part userface = req.getPart("userface");
        //假如我们要将用户上传的图像保存到项目当前运行的目录中
        //获取项目当前真正运行的目录
        String realPath = req.getServletContext().getRealPath("/");
        //用户图像的保存路径：  项目的运行路径/img/2022/04/12/
        String format = sdf.format(new Date());
        String saveUserfacePath = realPath + "/img" + format;
        //创建项目保存的目录
        File folder = new File(saveUserfacePath);
        if (!folder.exists()) {
            //如果这个目录不存在，就创建
            folder.mkdirs();
        }
        //获取上传文件原本的文件名
        String oldName = userface.getSubmittedFileName();// 123.png
        //截取原本文件名的后缀，即 .png
        String suffix = oldName.substring(oldName.lastIndexOf("."));
        //新的文件名
        String newName = UUID.randomUUID().toString() + suffix;
        //保存文件，现在就把文件保存到磁盘上了
        userface.write(saveUserfacePath + newName);
        //上传成功后，一般是需要返回一个json，告诉前端刚刚上传成功的文件路径
        //生成文件的访问路径
        String url = req.getScheme()//获取请求协议，http 或者 https
                + "://"
                + req.getServerName()//获取项目域名
                + ":"
                + req.getServerPort()//获取项目端口号
                + req.getContextPath()//获取项目名称
                + "/img" + format + newName;
        //将文件的访问路径保存到数据库中
        System.out.println("username = " + username);
        System.out.println("url = " + url);
        //将文件路径返回到前端
        resp.getWriter().write(url);
    }
}

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/14617.html

servlet-上传文件

前端代码

后端代码

相关推荐