通过输入类型=文件获取字节数组

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[]值=输入到以api[]格式接收的Webapi输入文件。但是，我遇到了获取字节数组的困难。我期望我们可以通过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的更可靠的方法。

[旧答案] （已修改）

是的，<input type="file"/>感谢FileReader对象及其method，文件API确实提供了一种将File中的文件转换为二进制字符串的方法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>