xhr上传文件和数据java后台接收

最新推荐文章于 2024-05-16 10:23:10 发布

@小白—

最新推荐文章于 2024-05-16 10:23:10 发布

阅读量285

点赞数

文章标签： java 开发语言

本文链接：https://blog.csdn.net/fm521521/article/details/132648587

版权

以下是一个示例，演示如何使用Java后台接收通过XHR上传的文件和数据：

前端代码（HTML、JS）

<!DOCTYPE html>
<html>
<head>
	<title>文件上传</title>
</head>
<body>
	<form id="uploadForm">
		<input type="file" id="fileInput" name="file">
		<input type="text" name="username" placeholder="用户名">
		<input type="text" name="email" placeholder="邮箱">
		<button type="submit">上传</button>
	</form>

	<script>
		var form = document.getElementById('uploadForm');
        form.addEventListener('submit', function(event) {
            event.preventDefault();
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/upload');
            xhr.onload = function() {
                if (xhr.status === 200) {
                    console.log(xhr.responseText);
                } else {
                    console.error(xhr.statusText);
                }
            };
            xhr.onerror = function() {
                console.error(xhr.statusText);
            };
            var formData = new FormData(form);
            xhr.send(formData);
        });
	</script>
</body>
</html>

可以看到，我们使用了一个表单，包含了一个文件输入框以及其它数据输入框，然后使用XHR进行POST请求，将表单数据上传到Java后台。

Java后台代码

import java.io.File;
import java.io.IOException;
import java.util.List;

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

@WebServlet("/upload")
public class UploadServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    private static final String UPLOAD_DIR = "uploads";

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        File uploadDir = new File(getServletContext().getRealPath("/") + UPLOAD_DIR);
        if (!uploadDir.exists()) {
            uploadDir.mkdir();
        }

        String fileName = "";
        for (Part part : request.getParts()) {
            String contentType = part.getContentType();
            if (contentType != null && contentType.startsWith("image")) {
                fileName = getFileName(part);
                part.write(uploadDir + File.separator + fileName);
            }
        }

        String username = request.getParameter("username");
        String email = request.getParameter("email");

        response.getWriter().println("文件上传成功，用户名：" + username + "，邮箱：" + email + "，文件名：" + fileName);
    }

    private String getFileName(Part part) {
        String contentDisp = part.getHeader("content-disposition");
        String[] tokens = contentDisp.split(";");
        for (String token : tokens) {
            if (token.trim().startsWith("filename")) {
                return token.substring(token.indexOf("=") + 2, token.length()-1);
            }
        }
        return "";
    }
}

在Java后台，我们可以看到我们使用了Servlet API提供的 Part 接口，这个接口可以用于获取上传的文件。使用 request.getParts()方法可以获取所有上传的 Part，然后遍历每一个 Part，获取其中的文件名和数据，并将文件保存到指定的目录中。

注意，我们使用了 @WebServlet("/upload") 注解，将这个Servlet映射到了 /upload URL，这样前端页面中 xhr.open('POST', '/upload') 就可以将数据发送到这个Servlet中。

综上所述，这是一个通过File API上传文件和数据到Java后台的完整示例。

@小白—

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
xhr上传文件和数据java后台接收

可以看到，我们使用了一个表单，包含了一个文件输入框以及其它数据输入框，然后使用XHR进行POST请求，将表单数据上传到Java后台。综上所述，这是一个通过File API上传文件和数据到Java后台的完整示例。在Java后台，我们可以看到我们使用了Servlet API提供的。，获取其中的文件名和数据，并将文件保存到指定的目录中。接口，这个接口可以用于获取上传的文件。就可以将数据发送到这个Servlet中。注解，将这个Servlet映射到了。URL，这样前端页面中。方法可以获取所有上传的。
复制链接

扫一扫