javascript - 通过input type = file获取字节数组

Question

var profileImage = fileInputInByteArray;

$.ajax({
  url: 'abc.com/',
  type: 'POST',
  dataType: 'json',
  data: {
     // Other data
     ProfileImage: profileimage
     // Other data
  },
  success: {
  }
})

// Code in WebAPI
[HttpPost]
public HttpResponseMessage UpdateProfile([FromUri]UpdateProfileModel response) {
  //...
  return response;
}

public class UpdateProfileModel {
  // ...
  public byte[] ProfileImage {get ;set; }
  // ...
}

<input type="file" id="inputFile" />

我正在使用 ajax 调用将输入类型 = 文件输入的 byte[] 值发布到以 byte[] 格式接收的 web api。但是，我在获取字节数组时遇到了困难。我希望我们可以通过 File API 获取字节数组。

注意:在通过ajax调用之前，我需要先将字节数组存储在一个变量中

Answer 1

[编辑]

如上评论所述，虽然仍在某些 UA 实现上，readAsBinaryString方法没有达到规范，不应在生产中使用。相反，使用 readAsArrayBuffer并循环遍历它的 buffer取回二进制字符串:

document.querySelector('input').addEventListener('change', function() {

  var reader = new FileReader();
  reader.onload = function() {

    var arrayBuffer = this.result,
      array = new Uint8Array(arrayBuffer),
      binaryString = String.fromCharCode.apply(null, array);

    console.log(binaryString);

  }
  reader.readAsArrayBuffer(this.files[0]);

}, false);

<input type="file" />
<div id="result"></div>

有关将 arrayBuffer 转换为二进制字符串的更可靠方法，您可以引用 this answer .

---

[旧答案] _(已修改)

是的，文件 API 确实提供了一种转换文件的方法，在 <input type="file"/> 中到二进制字符串，感谢 FileReader对象及其方法 readAsBinaryString .
[但不要在生产中使用它!]

document.querySelector('input').addEventListener('change', function(){
    var reader = new FileReader();
    reader.onload = function(){
        var binaryString = this.result;
        document.querySelector('#result').innerHTML = binaryString;
        }
    reader.readAsBinaryString(this.files[0]);
  }, false);

<input type="file"/>
<div id="result"></div>

如果你想要一个数组缓冲区，那么你可以使用 readAsArrayBuffer() 方法:

document.querySelector('input').addEventListener('change', function(){
    var reader = new FileReader();
    reader.onload = function(){
        var arrayBuffer = this.result;
      console.log(arrayBuffer);
        document.querySelector('#result').innerHTML = arrayBuffer + '  '+arrayBuffer.byteLength;
        }
    reader.readAsArrayBuffer(this.files[0]);
  }, false);

<input type="file"/>
<div id="result"></div>