通过输入类型=文件获取字节数组 [英] Getting byte array through input type = file

问题描述

  var profileImage = fileInputInByteArray; $。ajax（{url：'abc.com/'，type：'POST'，dataType：'json'，data：{//其他数据ProfileImage：profileimage //其他数据}，成功：{}}）// WebAPI中的代码[HttpPost] public HttpResponseMessage UpdateProfile（[FromUri] UpdateProfileModel response）{// ... return response;} public class UpdateProfileModel {// public byte [] ProfileImage {get; set; } //  

< input type = fileid =inputFile/>

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

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

解决方案

上面的评论，仍然在一些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转换为二进制字符串，您可以参考这个答案。

---

[旧答案] _{（已修改） sub>}

是的，文件API确实提供了一种转换文件的方法，在< input type =file/> 转换为二进制字符串，这要归功于 FileReader 对象及其方法 readAsBinaryString 。
[但不要在生产中使用它！]

document.querySelector （）; 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>  

b $ b

如果你想要一个数组缓冲区，那么你可以使用

<预class =snippet-code-html lang-html prettyprint-override> < input type =file/>< div id =result>< / div> code>

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" />

I am using ajax call to post byte[] value of a input type = file input to web api which receives in byte[] format. However, I am experiencing difficulty of getting byte array. I am expecting that we can get the byte array through File API.

Note: I need to store the byte array in a variable first before passing through ajax call

解决方案

[Edit]

As noted in comments above, while still on some UA implementations, readAsBinaryString method didn't made its way to the specs and should not be used in production. Instead, use readAsArrayBuffer and loop through it's buffer to get back the binary string :

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>

For a more robust way to convert your arrayBuffer in binary string, you can refer to this answer.

---

[old answer] _(modified)

Yes, the file API does provide a way to convert your File, in the <input type="file"/> to a binary string, thanks to the FileReader Object and its method readAsBinaryString.
[But don't use it in production !]

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>

If you want an array buffer, then you can use the readAsArrayBuffer() method :

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>

这篇关于通过输入类型=文件获取字节数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！