HTML+JS上传图片返回fakepath，如何传至非Spring/JSF的Java后端？

首先得明确：你拿到的C:\fakepath\IMAGE_NAME是浏览器的安全限制导致的虚拟路径——为了保护用户本地文件系统隐私，浏览器绝不会暴露文件的真实本地路径。所以正确思路不是传路径，而是直接传递文件本身或者将文件转为Base64字符串传递。下面给你两种可行方案，都不需要JSF或Spring框架：

方案一：用FormData直接上传文件（推荐，适合大文件） #

这是标准的文件上传方式，直接传递文件二进制数据，后端解析后处理。

前端代码（HTML + JS） #

调整你的HTML，增加上传触发按钮：

<div class="col-xs-6">
  <label>passport image </label>
  <input id="image-input" type="file" placeholder="file" accept="image/*">
  <button onclick="uploadFile()">上传图片</button>
</div>

编写JavaScript上传逻辑：

function uploadFile() {
  const fileInput = document.getElementById('image-input');
  const file = fileInput.files[0]; // 获取选中的文件对象

  if (!file) {
    alert('请先选择图片');
    return;
  }

  // 构造FormData，模拟表单上传
  const formData = new FormData();
  formData.append('passportImage', file); // 参数名和后端保持一致

  // 发送请求到后端Servlet
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/image-upload-servlet', true); // 替换为你的Servlet路径

  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log('上传成功');
      // 可在此处理后端返回的结果
    } else {
      console.error('上传失败，请重试');
    }
  };

  xhr.send(formData);
}

Java后端（Servlet）处理 #

在Servlet中添加@MultipartConfig注解支持文件上传，然后接收并处理：

import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
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;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.PreparedStatement;

@WebServlet("/image-upload-servlet")
@MultipartConfig // 必须添加此注解以支持文件上传
public class ImageUploadServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 获取上传的文件
        Part filePart = request.getPart("passportImage"); // 和前端参数名一致
        InputStream inputStream = filePart.getInputStream();

        // 将文件转为Base64字符串存入数据库
        String base64Image = javax.xml.bind.DatatypeConverter.printBase64Binary(inputStream.readAllBytes());

        // 数据库存储示例（替换为你的数据库连接逻辑）
        try (Connection conn = getDatabaseConnection()) {
            String sql = "INSERT INTO user_passports (image_base64) VALUES (?)";
            PreparedStatement pstmt = conn.prepareStatement(sql);
            pstmt.setString(1, base64Image);
            pstmt.executeUpdate();
        } catch (Exception e) {
            e.printStackTrace();
            response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
            return;
        }

        response.setStatus(HttpServletResponse.SC_OK);
    }

    // 实现自己的数据库连接方法
    private Connection getDatabaseConnection() throws Exception {
        return java.sql.DriverManager.getConnection(
            "jdbc:mysql://localhost:3306/your_db", 
            "db_username", 
            "db_password"
        );
    }
}

方案二：将图片转为Base64字符串上传（适合小图片） #

把图片编码为Base64字符串，作为普通参数传递给后端，解码后存入数据库。

前端代码 #

HTML保持不变，JS修改为：

function uploadAsBase64() {
  const fileInput = document.getElementById('image-input');
  const file = fileInput.files[0];

  if (!file) {
    alert('请先选择图片');
    return;
  }

  const reader = new FileReader();
  reader.onload = function(e) {
    // 去掉Base64前缀（data:image/png;base64,），只保留编码部分
    const pureBase64 = e.target.result.split(',')[1];

    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/base64-upload-servlet', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    xhr.onload = function() {
      xhr.status === 200 ? console.log('上传成功') : console.error('上传失败');
    };

    // 发送编码后的字符串
    xhr.send('imageBase64=' + encodeURIComponent(pureBase64));
  };

  reader.readAsDataURL(file); // 读取文件并转为Base64
}

Java后端（Servlet）处理 #

接收Base64字符串并直接存入数据库：

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;

@WebServlet("/base64-upload-servlet")
public class Base64UploadServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException {
        String base64Image = request.getParameter("imageBase64");

        if (base64Image == null || base64Image.isEmpty()) {
            response.setStatus(HttpServletResponse.SC_BAD_REQUEST);
            return;
        }

        // 存入数据库
        try (Connection conn = getDatabaseConnection()) {
            String sql = "INSERT INTO user_passports (image_base64) VALUES (?)";
            PreparedStatement pstmt = conn.prepareStatement(sql);
            pstmt.setString(1, base64Image);
            pstmt.executeUpdate();
        } catch (Exception e) {
            e.printStackTrace();
            response.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
            return;
        }

        response.setStatus(HttpServletResponse.SC_OK);
    }

    private Connection getDatabaseConnection() throws Exception {
        return java.sql.DriverManager.getConnection(
            "jdbc:mysql://localhost:3306/your_db", 
            "db_username", 
            "db_password"
        );
    }
}

注意事项 #

• 方案一适合大图片：Base64会使文件体积增加约30%，大文件用FormData传输效率更高；
• 方案二适合小图片（如头像、图标）：传输逻辑更简单；
• 后端处理时务必关闭流和数据库连接，避免资源泄漏；
• 若使用低版本Servlet容器（如Tomcat 6及以下），需手动处理文件上传，不支持@MultipartConfig注解。

内容的提问来源于stack exchange，提问作者IT Developer