如何用JavaScript input file onChange结合Java Jersey REST API实现文件上传

我来帮你把前后端的文件上传逻辑补全并串联起来，这样你就能实现完整的文件上传功能了！

一、补全Jersey后端上传服务 #

首先，你的后端代码需要完整实现文件接收和本地存储的逻辑，还要确保引入了处理multipart/form-data的依赖。下面是完整的服务类代码：

import javax.ws.rs.Consumes;
import javax.ws.rs.POST;
import javax.ws.rs.Path;
import javax.ws.rs.core.Response;
import org.glassfish.jersey.media.multipart.FormDataContentDisposition;
import org.glassfish.jersey.media.multipart.FormDataParam;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;

@Path("/file")
public class FileUpload {
    // 上传文件存储路径，注意替换成你自己的有效路径
    public static final String UPLOAD_FILE_SERVER = "C://Users//Feroz//Documents//filefolder//";

    @POST
    @Consumes(javax.ws.rs.core.MediaType.MULTIPART_FORM_DATA)
    @Path("/upload")
    public Response uploadFile(
            @FormDataParam("file") InputStream fileInputStream,
            @FormDataParam("file") FormDataContentDisposition fileMetaData) {

        try {
            // 确保存储目录存在，不存在则创建
            File uploadDir = new File(UPLOAD_FILE_SERVER);
            if (!uploadDir.exists()) {
                uploadDir.mkdirs();
            }

            // 拼接完整的文件存储路径
            String filePath = UPLOAD_FILE_SERVER + fileMetaData.getFileName();
            FileOutputStream outputStream = new FileOutputStream(filePath);

            // 读取输入流并写入文件
            int read;
            byte[] bytes = new byte[1024];
            while ((read = fileInputStream.read(bytes)) != -1) {
                outputStream.write(bytes, 0, read);
            }

            outputStream.flush();
            outputStream.close();
            fileInputStream.close();

            return Response.status(Response.Status.OK)
                    .entity("文件上传成功：" + fileMetaData.getFileName())
                    .build();

        } catch (IOException e) {
            e.printStackTrace();
            return Response.status(Response.Status.INTERNAL_SERVER_ERROR)
                    .entity("文件上传失败：" + e.getMessage())
                    .build();
        }
    }
}

后端必要配置 #

1. 添加Maven依赖：要处理多部分表单数据，需要引入jersey-media-multipart依赖，在pom.xml中添加：

<dependency>
    <groupId>org.glassfish.jersey.media</groupId>
    <artifactId>jersey-media-multipart</artifactId>
    <version>2.35</version> <!-- 版本号和你的Jersey版本保持一致 -->
</dependency>

2. 注册MultiPartFeature：在你的Jersey配置类中注册MultiPartFeature，否则无法解析multipart/form-data请求：

import org.glassfish.jersey.media.multipart.MultiPartFeature;
import javax.ws.rs.ApplicationPath;
import javax.ws.rs.core.Application;
import java.util.HashSet;
import java.util.Set;

@ApplicationPath("/api")
public class JerseyConfig extends Application {
    @Override
    public Set<Class<?>> getClasses() {
        Set<Class<?>> resources = new HashSet<>();
        resources.add(FileUpload.class);
        resources.add(MultiPartFeature.class); // 注册这个特性
        return resources;
    }
}

二、完善前端JavaScript上传逻辑 #

你的前端uploadFile函数目前只打印了文件名，需要扩展成发送POST请求到后端接口的逻辑。这里用现代的fetch API实现：

<!-- 注意给input添加name属性，值要和后端@FormDataParam的参数名一致 -->
<input type="file" name="file" onchange="uploadFile($event)"/>

<script>
function uploadFile(event) {
    const file = event.files[0];
    if (!file) return;

    // 创建FormData对象，用于包装文件数据
    const formData = new FormData();
    formData.append('file', file); // 'file'要和后端@FormDataParam的参数名完全匹配

    // 发送POST请求到后端接口
    fetch('/api/file/upload', { // 这里的路径要和你的Jersey配置的ApplicationPath+@Path对应
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(message => {
        console.log(message);
        alert(message); // 可以添加成功提示
    })
    .catch(error => {
        console.error('上传出错:', error);
        alert('文件上传失败，请稍后重试');
    });
}
</script>

三、关键注意事项 #

• 路径匹配：前端fetch的URL要和后端的@ApplicationPath（比如/api）加上@Path("/file")和@Path("/upload")拼接，也就是/api/file/upload，别写错了。
• 文件权限：后端的UPLOAD_FILE_SERVER路径要确保服务器进程有读写权限，否则会抛出IO异常。
• 跨域问题：如果前端和后端运行在不同的端口/域名下，需要在后端配置CORS支持，比如添加@CrossOrigin注解或者Jersey的CORS过滤器。
• 参数名一致：前端formData.append('file', file)中的'file'必须和后端@FormDataParam("file")的参数名完全相同，否则后端接收不到文件。

内容的提问来源于stack exchange，提问作者Feroz Siddiqui