Question

有可能这样做吗？更详细：

我有一个从输入元素
我想将其与一些内容一起上传到服务器带有相关数据的键/值对（文件名等）
我想用Ajax做这件事，因为在系统中还有其他东西使用Ajax，我有基于标准化的成功/失败处理服务器响应
我想用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*|UÌ¤FÝ▒§®Y3NÙ+2¤"ã0èT...

请注意Content-Length字段-原始表单绝对是最佳选择，但是它不能像第一个表单那样方便地发送任何其他键值对数据。

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

1 个答案: