如何使用servlet实现上传功能及 web项目文件上传原理

最新推荐文章于 2023-07-30 00:48:18 发布

搬砖的阿陆

最新推荐文章于 2023-07-30 00:48:18 发布

阅读量781

点赞数

文章标签： servlet 前端 java

本文链接：https://blog.csdn.net/qq_42978230/article/details/127310778

版权

1.新建一个干净的javaweb工程并且引入三个需要用到的jar

在这里插入图片描述

2.编写上传jsp页面

在这里插入图片描述

代码：

<%--
  Created by IntelliJ IDEA.
  User: 19556
  Date: 2022/6/13
  Time: 23:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        input[type="submit"] {
            outline: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #31B0D5;
            border: none;
            width: 70px;
            height: 35px;
            font-size: 20px;
        }

        img {
            border-radius: 50%;
        }

        form {
            position: relative;
            width: 200px;
            height: 200px;
        }

        input[type="file"] {
            position: absolute;
            left: 0;
            top: 0;
            height: 200px;
            opacity: 0;
            cursor: pointer;
        }
    </style>

    <script type="text/javascript">
        function prev(event) {
            //获取展示图片的区域
            var img = document.getElementById("prevView");
            //获取文件对象
            var file = event.files[0];
            //获取文件阅读器： Js的一个类，直接使用即可
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function () {
                //给img的src设置图片url
                img.setAttribute("src", this.result);
            }
        }
    </script>

</head>
<body>
<!-- 表单的enctype属性要设置为multipart/form-data
    enctype="multipart/form-data" 表示提交的数据是多个部分构造，有文件和文本
 -->
<form action="fileUploadServlet" method="post" enctype="multipart/form-data">
    <img src="2.jpg" alt="" width="200" height="200" id="prevView">
    <input type="file" name="pic" id="" value="" onchange="prev(this)"/>
    <input type="submit" value="上传"/>
</form>
</body>
</html>

   这里 action表示 接口请求地址为 fileUploadServlet，请求方式是post 如果是上传文件请求接口，这里的
   enctype必须要更改为 multipart/form-data 。因为默认的是 application/x-www-urlencoded (即url编码 这种编码不适用于二进制文件数据的提交)

运行一下，看看效果：

在这里插入图片描述
点击方框内部即可选择本地图片，输入框填写文件名称，点击上传将文件传输到后端接口

3.编写后端接口（重点）

@WebServlet(urlPatterns = "/fileUploadServlet")
public class UploadServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 判断表单是否是文件表单
        if(ServletFileUpload.isMultipartContent(req)){
            //  创建diskFileItemFactory对象
            DiskFileItemFactory diskFileItemFactory = new DiskFileItemFactory();
            ServletFileUpload servletFileUpload =
                    new ServletFileUpload(diskFileItemFactory);
            try {
                /*
                list==>
                [name=3.jpg, StoreLocation=D:\javaweb\apache-tomcat-8.0.50-windows-x64\apache-tomcat-8.0.50\temp\xupload__7e34374f_17fce4168b1__7f4b_00000000.tmp, size=106398bytes, isFormField=false, FieldName=pic,
                name=null, StoreLocation=D:\javaweb\apache-tomcat-8.0.50-windows-x64\apache-tomcat-8.0.50\temp\xupload__7e34374f_17fce4168b1__7f4b_00000001.tmp, size=6bytes, isFormField=true, FieldName=name]
                 */
                 //获取上传到tomcat上的临时文件信息
                List<FileItem> list = servletFileUpload.parseRequest(req);
                //需要存放的文件夹
                String path = "/upload/";
                for (FileItem fileItem : list) {
                    if(!fileItem.isFormField()){
                        //表示是文件
                        //开始使用io流将temp目录中的文件保存到自己想要的目录
                        //1.获取到项目运行的真正目录
                        String realPath = req.getServletContext().getRealPath(path);
                        System.out.println("realPath = " + realPath);
                        File file = new File(realPath);
                        if(!file.exists()){
                            //如果不存在，则创建一个文件夹
                            file.mkdir();
                        }
                        // fileItem.getName() 文件名
                        String fullName = realPath + fileItem.getName();
                        fileItem.write(new File(fullName));
                    }
                }
                resp.setContentType("text/html;charset=utf-8");
                PrintWriter writer = resp.getWriter();
                writer.println("上传成功！");
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    	//如果是post请求 则调用doget方法
        doGet(req, resp);
    }
}

尝试一下：
此时我们上传这个文件
在这里插入图片描述
执行完代码之后

成功！

总结：

web上传功能，上传前会将文件上传到tomcat的一个临时目录（这个是tomcat自动存的）。然后我们在代码中创建 DiskFileItemFactory 对象，从tomcat文件取出该文件，然后使用io流进行存储到我们想要存放的路径即可。这里我们使用的是servlet，代码较为复杂。springboot中上传功能，他的底层逻辑和这个一样，只不过他将其封装罢了。