使用JavaScript将文件作为二进制流POST到服务器

Question

我有一个疑问，我已经在网上进行了普遍搜索，但是没有找到我想要的答案。我使用 HTML input type=file 属性从本地系统上传了一个文件。

现在，我想使用 JavaScript 将此文件转换为二进制流，然后将该流 POST 到服务器。是否有人能够提供一个示例代码或想法让我理解它是如何工作的呢？

例如：

<input type="file" id="myFile">
<button onclick="myFunction()">Upload</button>
<script>
function myFunction() 

    {
    var x = document.getElementById("myFile"); 
    //convert x to a IOstream*
    //do a HTTP POST request to server and also write the file as stream like request.getstream
    }

</script>

只使用JS能实现吗？目前我只关注上传媒体文件，比如图片。 它必须以IO流方式上传，因为这是服务器唯一接受的格式。 同时，它必须在Safari浏览器中可用！ 提前感谢！

- user4299110

---

嗯......将您的<input>标签放在<form method="post">表单中并使用submit()提交它？ - AJPerez

只需使用 FormData。 - Ja͢ck

Answer 1

FileReader方法支持

FileReader.readAsBinaryString()已被弃用，不要使用它！它不再出现在W3C文件API工作草案中：

void abort();
void readAsArrayBuffer(Blob blob);
void readAsText(Blob blob, optional DOMString encoding);
void readAsDataURL(Blob blob);

注意：请注意，File是一种扩展的Blob结构。

Mozilla仍然实现了readAsBinaryString()并在MDN FileApi文档中进行了描述。

void abort();
void readAsArrayBuffer(in Blob blob); Requires Gecko 7.0
void readAsBinaryString(in Blob blob);
void readAsDataURL(in Blob file);
void readAsText(in Blob blob, [optional] in DOMString encoding);

readAsBinaryString()方法被弃用的原因是：Javascript字符串的标准是DOMString，只接受UTF-8字符，而不接受随机二进制数据。因此，不要使用readAsBinaryString()，这样做既不安全，也不符合ECMAScript标准。

我们知道Javascript字符串不应存储二进制数据，但Mozilla在某种程度上可以这样做。我认为这很危险。为了允许使用纯二进制数据，而不受UTF-8字符串限制，发明了Blob和typed arrays（ArrayBuffer和尚未实现但不必要的StringView）。

XMLHttpRequest上传支持

XMLHttpRequest.send()有以下调用选项：

void send();
void send(ArrayBuffer data);
void send(Blob data);
void send(Document data);
void send(DOMString? data);
void send(FormData data);

XMLHttpRequest.sendAsBinary() 有以下调用选项：

void sendAsBinary(   in DOMString body );

sendAsBinary()不是标准的，可能在Chrome中不被支持。

解决方案

---

因此，您有几个选择：

1. send() FileReader.readAsArrayBuffer ( fileObject ) 的 FileReader.result。它更复杂，需要单独为其创建一个发送（send）操作，但这是建议的方法。

2. send() FileReader.readAsDataURL( fileObject ) 的 FileReader.result。它会产生无用的开销和压缩延迟，需要在服务器端进行解压步骤，但可以轻松地作为Javascript中的字符串进行操作。

3. 使用非标准的 sendAsBinary() ，则是将 FileReader.readAsBinaryString( fileObject ) 的 FileReader.result 发送出去。

MDN 指出：

上传二进制内容（例如文件上传）的最佳方式是使用ArrayBuffers或Blobs与send()方法一起使用。 但是，如果要发送可用字符串表示的原始数据，请改用sendAsBinary()方法，或使用StringView（非本机）类型化数组超类。

- Innodel

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - user4299110