Java附件上传服务端及前端上传附件的实现

最新推荐文章于 2024-04-23 18:52:22 发布

二开菜鸟

最新推荐文章于 2024-04-23 18:52:22 发布

阅读量1.6k

点赞数 2

文章标签： java 前端 servlet

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/u010048119/article/details/130510834

版权

Java附件上传服务端及前端上传附件的实现

1. Java附件上传服务端

Java附件上传服务端通常使用SpringMVC框架来实现，下面将给出一个示例代码。

创建一个Controller类，用于处理文件上传请求。

@Controller
@RequestMapping("/upload")
public class UploadController {
    @PostMapping("/file")
    @ResponseBody
    public String uploadFile(@RequestParam("file") MultipartFile file) {
        if (file.isEmpty()) {
            return "文件为空！";
        }
        try {
            String fileName = file.getOriginalFilename();
            String filePath = "/data/" + fileName;
            File dest = new File(filePath);
            file.transferTo(dest);
            return "文件上传成功！";
        } catch (IOException e) {
            e.printStackTrace();
            return "文件上传失败！";
        }
    }
}

在application.properties文件中配置上传文件的保存路径。

spring.servlet.multipart.enabled=true
spring.servlet.multipart.file-size-threshold=2MB
spring.servlet.multipart.max-file-size=5MB
spring.servlet.multipart.max-request-size=10MB
server.tomcat.basedir=/data/

在页面上添加一个上传文件的表单。

<form method="post" action="/upload/file" enctype="multipart/form-data">
    <input type="file" name="file"/>
    <input type="submit" value="上传"/>
</form>

启动程序，上传文件即可。

2. 前端上传附件的实现

前端上传附件主要使用HTML5提供的FormData对象来实现，下面将给出一个示例代码。

HTML代码

上传

JavaScript代码

function uploadFile() {
  var form = document.getElementById("myForm");
  var formData = new FormData(form);
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/upload/file");
  xhr.onload = function() {
    alert(xhr.responseText);
  };
  xhr.send(formData);
}

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML5上传文件</title>
</head>
<body>
  <form id="myForm">
    <input type="file" name="file" id="fileInput" />
    <button type="button" onclick="uploadFile()">上传</button>
  </form>
  <script>
    function uploadFile() {
      var form = document.getElementById("myForm");
      var formData = new FormData(form);
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "/upload/file");
      xhr.onload = function() {
        alert(xhr.responseText);
      };
      xhr.send(formData);
    }
  </script>
</body>
</html>