使用 Ajax 发布 URL 编码的文件数据

Question

可以这样做吗？更详细：

1. 我有一个从输入元素中检索到的文件对象
2. 我想把这个上传到服务器，连同几个 具有相关数据（文件名等）的键/值对
3. 我想用 Ajax 来做这件事，因为系统中的其他东西 使用 Ajax，我已经标准化了基于 服务器响应
4. 我想用 URL 编码来做这个，因为文件很小，而且 服务器没有实现multipart/form-data

我尝试了几种不同的方法，但没有一种是完全正确的。此代码“按原样”发送文件数据（即有效的原始二进制文件，而不是作为 URL 编码的键值对）：

   var files = document.getElementById('idUploadBrowseInput').files;
   var fdata = files[0];
   var jqxhr = $.ajax({
      type        : "POST",
      url         : "/cgi-bin/upload_cgi",
      timeout     : 20000,
      processData : false,
      data        : fdata
   }).always(...etc)

原始二进制文件可以，但我还需要其他键值对，而且似乎无法同时发送这些。

如果我将data : fdata 行更改为data : {fdata : fdata}，那么POST 数据将变为[object Object]（在FF 上）。如果我删除了processData:false，那么我会在 jQuery 中得到一个异常。

FileReader API 有一些我想我应该使用的 readAs 方法 - 大概，如果我将文件内容读入 var，那么我可以将 var 作为数据对象的一部分发送，它应该一切正常。但是，这是冗长的，我只是想先检查一下是否没有更直接的方法。

请注意，this post 没有回答问题。

Answer 1

我已经设法使用 AJAX（和 jQuery）发送文件，甚至有两种不同的方法：

const fileInput = document.getElementById('file-upload'); // refers to <input type="file">
const file = fileInput.files[0];

let reader = new FileReader();

reader.onload = function () {
  console.log(reader.result);

  $.ajax({
    type: 'POST',
    url: '/file-upload',

    // data: { file: reader.result }, // #1

    // data: reader.result,           // #2
    // processData: false,

    success: function (response) {
      alert(response);
    }
  });
}

// reader.readAsBinaryString(file); // #1
// reader.readAsArrayBuffer(file);  // #2

第一种方法发送文件的 URL 编码版本。在服务器端它看起来像这样：

POST /file-upload HTTP/1.1
Host: 127.0.0.1:8080
Connection: keep-alive
Content-Length: 59577
Accept: */*
Origin: http://127.0.0.1:8080
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36 OPR/56.0.3051.116
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://127.0.0.1:8080/test
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US;q=0.8,en;q=0.7

file=%00%00%00%02%00%00%00%C3%89%5B%C3%B1%15Y%2B%C3%86%C2%82%04%5C%0A%C2%...

第二种方法以原始形式发送文件 - 整个内容是纯二进制数据：

POST /file-upload HTTP/1.1
Host: 127.0.0.1:8080
Connection: keep-alive
Content-Length: 12342
Accept: */*
Origin: http://127.0.0.1:8080
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36 OPR/56.0.3051.116
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://127.0.0.1:8080/test
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US;q=0.8,en;q=0.7

É[ñY+Æ\»H*|ṲFÝ▒§®Y3NÙ+2¤"ã0èT...

注意Content-Length 字段 - 原始表单肯定更优化，但它不能像第一个表单那样方便地发送任何其他键值对数据。