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);
    }
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值