HTML表单文件上传及下载功能代码示例

在Web开发中，文件上传和下载是常见的功能需求，尤其是在用户需要提交文档、图片或其他类型文件或从服务器获取文件资源时。本文将详细介绍如何利用HTML表单实现文件的上传与下载功能。

一、HTML表单文件上传

HTML表单通过<input type="file">元素让用户选择本地文件，并配合form的enctype属性以及POST方式提交，即可实现文件上传到服务器。

下面是一个简单的HTML文件上传表单示例：

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

enctype="multipart/form-data"：这是用于文件上传必须设置的属性，表明表单数据将以多部分编码方式提交。

<input type="file">：允许用户选择一个或多个文件进行上传。

在后端（例如Java Spring Boot应用），你需要配置MultipartFile类型的参数来接收上传的文件，并进行存储或其他操作。

二、后端处理文件上传

在Spring Boot中，可以这样处理上传的文件：

import org.springframework.web.multipart.MultipartFile;

@PostMapping("/upload")
public ResponseEntity<?> handleFileUpload(@RequestParam("fileToUpload") MultipartFile file) {
    // 这里只是简单示例，实际开发中需要对文件进行合法性校验、存储等操作
    try {
        byte[] bytes = file.getBytes();
        // 存储文件，例如保存到服务器的某个目录
    } catch (IOException e) {
        // 处理异常
    }
    return ResponseEntity.ok().build();
}

三、HTML表单文件下载

不同于上传，文件下载通常由服务器生成响应并设置特定的Content-Type和Content-Disposition头信息，浏览器根据这些信息自动处理下载。

例如，在Java后端，你可以这样做：

@GetMapping("/download")
public void downloadFile(HttpServletResponse response) throws IOException {
    // 假设fileStream是从服务器读取文件的输入流
    InputStream inputStream = ... ;
    String filename = "example.txt";
    
    response.setContentType("application/octet-stream");
    response.setHeader("Content-Disposition", "attachment;filename=\"" + filename + "\"");

    IOUtils.copy(inputStream, response.getOutputStream());
    response.flushBuffer();
}

在此案例中，当用户访问/download这个URL时，服务器会将指定的文件作为附件发送给客户端，浏览器会提示用户下载该文件。