文件上传接口(可上传各种文件)与网页上上传图片和图片访问

最新推荐文章于 2024-04-27 23:13:56 发布

啊肥夫

最新推荐文章于 2024-04-27 23:13:56 发布

阅读量895

点赞数 22

分类专栏： Servlet学习文章标签： ajax servlet 经验分享 java

本文链接：https://blog.csdn.net/afeifu/article/details/138139257

版权

Servlet学习专栏收录该内容

8 篇文章 1 订阅

订阅专栏

文件上传接口(可上传各种文件)

servlet3.0开始(对应Tomcat7):Servlet自己提供了文件上传的解析工具

在web.xml配置

<multipart-config>

在sevlet使用 req.getPart 读取上传文件字段

req.getPart

配置sevlet

package com.gd.servlet;

import javax.servlet.ServletException;
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;

/**
 * @Author：FeiXiang
 * @Project：dfilesevlet
 * @name：FileDemo1
 * @Date：2024/4/23 17:19
 * @email:1466279039@qq.com
 */

/**
 * 文件上传用post请求，上传主体放在请求体重
 */
public class FileDemo1 extends HttpServlet {
    //    注意路径拼接的 /
    private SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/");

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        System.out.println("username = " + username);
        // 读取上传文件字段
        Part filePart = req.getPart("file");
        //  获取项目运行目录下的img 路径，将上传文件都保存到这里，（再使用分离管理，这里用时间拼接,上面定义一个时间格式）
        String realPath = req.getServletContext().getRealPath("/img");

        String format=sdf.format(new Date());
        String folderPath = realPath +format;

        File folder = new File(folderPath);
        if (!folder.exists()) {
            //        递归创建文件夹
            folder.mkdirs();
        }
//        获取上传文件原始名称(用于下面改名，防止上传文件名称相同)
       String oldName=filePart.getSubmittedFileName();
//        改名 1.拿后缀  2.生成唯一新名称并拼接
        String suffix=oldName.substring(oldName.lastIndexOf("."));
        String newName=UUID.randomUUID()+suffix;

//        保存文件
        filePart.write(folderPath+newName);

//        获取上传文件访问链接，用于访问文件
//        请求协议
        String url = req.getScheme() + "://"
//        服务名（域名）
                + req.getServerName()
                + ":"
//        端口号
                + req.getServerPort()
//        文件上下文路径
                + req.getContextPath()
//        文件路径
                + "/img" + format+newName;
        resp.getWriter().write(url);
    }
}

配置web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>UploadServlet</servlet-name>
        <servlet-class>com.gd.servlet.FileDemo1</servlet-class>
        <multipart-config>
            <!--            临时文件路径-->
            <location>D:\Documents\Desktop\test\servlettest\temporary</location>
            <!--            上传文件大小限制-->
            <max-file-size>1000000</max-file-size>
            <!--            上传文件请求大小限制-->
            <max-request-size>10000000</max-request-size>
            <!--            上传文件，需先写入临时文件的文件大小(超过这个值进行边写)-->
            <file-size-threshold>1024</file-size-threshold>
        </multipart-config>
    </servlet>
    <servlet-mapping>
        <servlet-name>UploadServlet</servlet-name>
        <url-pattern>/upload</url-pattern>
    </servlet-mapping>
</web-app>

测试

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

网页上上传图片和图片访问

使用from表单

upload.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
</head>
<body>
<!--文件上传需要额外配置 enctype="multipart/form-data "-->
  <form action="/web01/upload" method="post" enctype="multipart/form-data">
      <table>
        <tr>
            <td>用户名:</td>
            <td><input type="text" name="username"></td>
        </tr>
          <tr>
          <td>用户文件:</td>
          <td><input type="file" name="file"></td>
          </tr>
          <tr>
              <td><input type="submit" value="提交"></td>
          </tr>
      </table>
  </form>
</body>
</html>

使用ajax

添加jquery 添加ajax请求

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <script src="jquery-3.7.1.min.js"></script>
</head>
<body>
<!--文件上传需要额外配置 enctype="multipart/form-data "-->
<form action="/web01/upload" method="post" enctype="multipart/form-data">
    <table>
      <tr>
          <td>用户名:</td>
          <td><input type="text" name="username"></td>
      </tr>
        <tr>
        <td>用户文件:</td>
        <td><input type="file" name="file"></td>
        </tr>
        <tr>
            <td><input type="submit" value="提交"></td>
        </tr>
    </table>
</form>
//使用ajax请求
<hr>
<table>
    <tr>
        <td>用户名:</td>
        <td><input type="text" id="username"></td>
    </tr>
    <tr>
        <td>用户文件:</td>
        <!--         multiple可用于选多个文件   -->
        <!--            <td><input type="file" id="file" multiple></td>-->
        <td><input type="file" id="file"></td>
    </tr>
    <tr>
        <td><input type="button" value="提交" onclick="uploadFile()"></td>
    </tr>
</table>
<div id="result"></div>
<script>
    function uploadFile() {
        let username = $("#username").val();
        //jQuery->js $("#file")[0];
        //js->jQuery $(document.getElementById("file"))
        //将拿到的jQuery对象，转成js,在js对象中可获取想拿的东西
        //js的.files获取input输入框中文件 返回数组(防止上传多个文件)。上面使用multiple可用于选多个文件
        let files = $("#file")[0].files;
        //    提取数组唯一文件
        let file = files[0];

        //    ---数据传递---
        //    创建表单数据, 将表单数据存在这个data中
        let data = new FormData();
        //组装要上传的数据
        data.append("username", username);
        data.append("file", file);
        $.ajax({
            url: '/web01/upload',
            type: 'post',
            data: data,
            //不设置contentType 根据文件类型自己设置contentType
            contentType: false,
            //   processData:关闭请求处理
            processData: false,
            success: data => {
                $("#result").html("<a href='" + data + "'>查看图片</a>")
            }
        })
    }
</script>
</body>
</html>