提交表单时如何通过jQuery从file输入框提取byte[]

我来帮你搞定这个问题！你现在碰到的情况是，File对象本身不会直接暴露byte[]数据，得用正确的API来读取或者封装文件内容，下面给你两种靠谱的方案：

首先先修正下你原HTML里的小问题——多了一个闭合</div>，调整后的代码如下：

<form class="submitform">
  <div class="input-group">
    <input type="file" class="custom-file-input" id="fileInput" aria-describedby="fileInput" />
    <label class="custom-file-label" for="fileInput">Choose file</label>
  </div>
  <div class="modal-footer row">
    <button type="submit" class="btn btn-primary" id="submitAddFile">Submit</button>
  </div>
</form>

方案一：使用FormData提交（推荐，符合原生表单逻辑） #

这种方法是浏览器原生支持的文件上传方式，不需要手动处理字节数组，后端接收也更简单，适合大多数场景：

$('#submitAddFile').click(function (e) {
  // 阻止表单默认跳转行为
  e.preventDefault();
  
  // 获取选中的文件对象
  const file = $('#fileInput')[0].files[0];
  if (!file) {
    alert('请先选择要上传的文件！');
    return;
  }
  
  // 创建FormData对象封装文件数据
  const formData = new FormData();
  // 添加文件到FormData，第一个参数要和后端控制器的参数名对应
  formData.append('uploadedFile', file);
  // 也可以单独传文件名（其实后端从文件对象里也能拿到）
  formData.append('fileName', file.name);
  
  // 用AJAX提交到后端控制器
  $.ajax({
    url: '/YourController/UploadFile', // 替换成你的实际控制器路由
    type: 'POST',
    data: formData,
    processData: false, // 必须设为false，禁止jQuery自动处理FormData
    contentType: false, // 必须设为false，让浏览器自动设置正确的请求头
    success: function (response) {
      console.log('文件上传成功！', response);
      // 这里可以加成功后的逻辑，比如关闭模态框、提示用户等
    },
    error: function (xhr, status, error) {
      console.error('文件上传失败：', error);
      // 错误处理逻辑
    }
  });
});

后端控制器示例（以ASP.NET Core为例） #

[HttpPost]
public IActionResult UploadFile(IFormFile uploadedFile, string fileName)
{
    if (uploadedFile == null || uploadedFile.Length == 0)
    {
        return BadRequest("请选择有效的文件");
    }
    
    // 将文件读取为byte[]
    using var memoryStream = new MemoryStream();
    uploadedFile.CopyTo(memoryStream);
    byte[] fileBytes = memoryStream.ToArray();
    
    // 这里执行你的数据库存储逻辑，比如把fileBytes和fileName存入数据库
    // ...
    
    return Ok("文件已成功上传并存储");
}

方案二：前端直接读取byte[]（适合需要预处理文件的场景） #

如果需要在前端先对文件内容做处理（比如图片压缩、加密），可以用FileReader API读取文件为字节数组：

$('#submitAddFile').click(function (e) {
  e.preventDefault();
  
  const file = $('#fileInput')[0].files[0];
  if (!file) {
    alert('请先选择文件！');
    return;
  }
  
  // 创建FileReader实例
  const reader = new FileReader();
  
  // 监听文件读取完成事件
  reader.onload = function(e) {
    // 将读取到的ArrayBuffer转成Uint8Array，再转成普通数组（对应后端的byte[]）
    const arrayBuffer = e.target.result;
    const uint8Array = new Uint8Array(arrayBuffer);
    const byteArray = Array.from(uint8Array);
    
    // 将字节数组和文件名提交到后端
    $.ajax({
      url: '/YourController/SaveFileBytes',
      type: 'POST',
      contentType: 'application/json',
      data: JSON.stringify({
        fileName: file.name,
        fileBytes: byteArray
      }),
      success: function(response) {
        console.log('文件字节数据提交成功！');
      },
      error: function(xhr, status, error) {
        console.error('提交失败：', error);
      }
    });
  };
  
  // 以ArrayBuffer格式读取文件
  reader.readAsArrayBuffer(file);
  
  // 监听读取错误事件
  reader.onerror = function() {
    console.error('文件读取失败，请重试');
  };
});

后端接收byte[]的示例 #

[HttpPost]
public IActionResult SaveFileBytes([FromBody] FileUploadModel model)
{
    if (model == null || model.FileBytes == null || model.FileBytes.Length == 0)
    {
        return BadRequest("无效的文件数据");
    }
    
    // model.FileBytes就是前端传来的byte[]，model.FileName是文件名
    // 执行数据库存储逻辑
    // ...
    
    return Ok("文件数据已成功存储");
}

// 对应的模型类
public class FileUploadModel
{
    public string FileName { get; set; }
    public byte[] FileBytes { get; set; }
}

注意事项 #

• 优先选方案一，因为它处理大文件更高效，也更符合浏览器原生的表单上传规范
• 如果用方案二，要注意大文件读取可能会占用较多前端内存，建议限制文件大小
• 后端要配置好允许的最大文件上传大小，避免因文件过大导致请求失败

内容的提问来源于stack exchange，提问作者Jeppe Christensen