Springmvc加ajax实现上传文件并页面局部刷新

首先，上传文件是指将文件从客户端传输到服务器端，而Springmvc是一种轻量级的mvc框架。在本文中，将会介绍如何利用Springmvc和ajax实现文件上传和页面局部刷新。

一、环境准备

实现文件上传需要用到Springmvc和Spring的MultipartResolver组件，因此需要在pom.xml文件中引入相关依赖。

<!-- Springmvc -->
<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-webmvc</artifactId>
  <version>5.1.9.RELEASE</version>
</dependency>

<!-- Spring -->
<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-context</artifactId>
  <version>5.1.9.RELEASE</version>
</dependency>

<!-- 文件上传 -->
<dependency>
  <groupId>commons-fileupload</groupId>
  <artifactId>commons-fileupload</artifactId>
  <version>1.4</version>
</dependency>

二、实现文件上传

1. 编写controller

Controller是Springmvc中处理请求的控制器，通过在Controller中定义方法，可以进行文件上传。

@Controller
public class FileUploadController {

  // 跳转至上传文件页面
  @GetMapping("/file_upload")
  public String fileUpload() {
    return "file_upload";
  }

  // 处理文件上传请求
  @PostMapping("/upload")
  @ResponseBody
  public String upload(MultipartFile file) {
    // 上传文件，返回结果
    return "success";
  }

}

上面的代码中，定义了两个方法：fileUpload和upload。其中，fileUpload方法返回了一个视图名file_upload，用来显示上传文件的页面；而upload方法则是用来处理上传文件请求的方法，其中的MultipartFile类型的参数是Springmvc中用来处理文件上传的对象。

2. 编写页面

上传文件需要一个表单，因此需要在页面中编写表单。

<form id="upload_form">
  <input type="file" name="file">
  <button type="submit">上传</button>
</form>

其中，form标签需要设置为id为upload_form，通过ajax提交上传请求。

3. 实现文件上传

利用ajax向服务器端发送请求，实现文件上传。

$(function () {
  // 监听表单提交事件
  $('#upload_form').submit(function (e) {
    e.preventDefault(); // 阻止表单默认提交行为
    $.ajax({
      url: '/upload', // 请求地址
      type: 'POST', // 请求类型
      data: new FormData(this), // 表单数据
      processData: false, // 不处理数据
      contentType: false, // 不设置参数类型
      success: function (result) {
        // 刷新页面
        location.reload();
      }
    });
  });
});

上述代码中，通过监听表单提交事件，通过ajax向服务器端POST请求，其中data参数设置为new FormData(this)，表示将表单中的数据全部上传至服务器端，包括文件。success回调函数中，刷新页面，实现页面的局部刷新。

三、示例说明

示例1：将上传的文件保存至服务器端

在上传文件请求方法中，可以将上传的文件保存在服务器端。

@PostMapping("/upload")
@ResponseBody
public String upload(MultipartFile file) throws IOException {
  // 将文件保存至服务器端
  String fileName = file.getOriginalFilename(); // 文件名
  String filePath = "/tmp/"; // 文件保存路径
  File dest = new File(filePath + fileName);
  file.transferTo(dest); // 保存文件
  return "success";
}

上述代码中，首先获取上传文件的文件名，然后将文件保存到/tmp/目录下。

示例2：返回上传文件的url

将上传的文件保存至服务器端后，可以在上传请求方法中返回文件的url。

@PostMapping("/upload")
@ResponseBody
public String upload(MultipartFile file) throws IOException {
  // 将文件保存至服务器端
  String fileName = file.getOriginalFilename(); // 文件名
  String filePath = "/tmp/"; // 文件保存路径
  File dest = new File(filePath + fileName);
  file.transferTo(dest); // 保存文件

  // 文件url
  String fileUrl = "http://localhost:8080/file/" + fileName;
  return fileUrl;
}

该示例中，在保存文件后，返回了文件的url，url为http://localhost:8080/file/fileName。在返回结果中，可以通过ajax获取并显示文件url。

$(function () {
  // 监听表单提交事件
  $('#upload_form').submit(function (e) {
    e.preventDefault(); // 阻止表单默认提交行为
    $.ajax({
      url: '/upload', // 请求地址
      type: 'POST', // 请求类型
      data: new FormData(this), // 表单数据
      processData: false, // 不处理数据
      contentType: false, // 不设置参数类型
      success: function (result) {
        // 显示文件url
        $('#file_url').text(result);
      }
    });
  });
});

在ajax的success回调函数中，将返回结果显示在id为file_url的html标签中，实现了页面的局部刷新。

阅读剩余 70%