通过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 调用 post byte[] 输入类型 = 文件输入到 Web api 的值，它以 byte[] 格式接收。但是，我在获取字节数组时遇到了困难。我期望我们可以通过 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 Object and its method 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>

Answer 2

$(document).ready(function(){
    (function (document) {
  var input = document.getElementById("files"),
  output = document.getElementById("result"),
  fileData; // We need fileData to be visible to getBuffer.

  // Eventhandler for file input. 
  function openfile(evt) {
    var files = input.files;
    // Pass the file to the blob, not the input[0].
    fileData = new Blob([files[0]]);
    // Pass getBuffer to promise.
    var promise = new Promise(getBuffer);
    // Wait for promise to be resolved, or log error.
    promise.then(function(data) {
      // Here you can pass the bytes to another function.
      output.innerHTML = data.toString();
      console.log(data);
    }).catch(function(err) {
      console.log('Error: ',err);
    });
  }

  /* 
    Create a function which will be passed to the promise
    and resolve it when FileReader has finished loading the file.
  */
  function getBuffer(resolve) {
    var reader = new FileReader();
    reader.readAsArrayBuffer(fileData);
    reader.onload = function() {
      var arrayBuffer = reader.result
      var bytes = new Uint8Array(arrayBuffer);
      resolve(bytes);
    }
  }

  // Eventlistener for file input.
  input.addEventListener('change', openfile, false);
}(document));
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<input type="file" id="files"/>
<div id="result"></div>
</body>
</html>

Answer 3

这是一个很长的 post，但我厌倦了所有这些对我不起作用的示例，因为它们使用了 Promise 对象或错误的 this，当您正在使用 Reactjs。我的实现是使用带有 reactjs 的 DropZone，并且我使用类似于以下站点 posted 的框架获取字节，而上面的任何其他方法都不起作用： https://www.mokuji.me/article/drop-upload-tutorial-1 。有 2 个键，对我来说：

您必须使用 FileReader 的 onload 函数并在其执行期间从事件对象获取字节。
我尝试了各种组合，但最后，有效的是：

const bytes = e.target.result.split('base64,')[1];

其中 e 是事件。 React 需要 const，你可以在 Javascript 中使用 var。但这给了我 base64 编码的字节字符串。

所以我将包括适用的行来集成它，就好像你在使用 React 一样，因为这就是我构建它的方式，但也尝试概括它，并在必要时添加评论，以使其成为现实适用于香草 Javascript 实现 - 警告说我没有像这样在这样的构造中使用它来测试它。

这些将是你在顶部的绑定，在你的构造函数中，在 React 框架中（与普通 Javascript 实现无关）：

this.uploadFile = this.uploadFile.bind(this);
this.processFile = this.processFile.bind(this);
this.errorHandler = this.errorHandler.bind(this);
this.progressHandler = this.progressHandler.bind(this);

并且您的 DropZone 元素中会有 onDrop={this.uploadFile}。如果您在没有 React 的情况下执行此操作，这相当于在单击 "Upload File" 按钮时添加您想要运行的 onclick 事件处理程序。

<button onclick="uploadFile(event);" value="Upload File" />

然后是功能（适用行...我将省略我重置上传进度指示器等）：

uploadFile(event){
    // This is for React, only
    this.setState({
      files: event,
    });
    console.log('File count: ' + this.state.files.length);

    // You might check that the "event" has a file & assign it like this 
    // in vanilla Javascript:
    // var files = event.target.files;
    // if (!files && files.length > 0)
    //     files = (event.dataTransfer ? event.dataTransfer.files : 
    //            event.originalEvent.dataTransfer.files);

    // You cannot use "files" as a variable in React, however:
    const in_files = this.state.files;

    // iterate, if files length > 0
    if (in_files.length > 0) {
      for (let i = 0; i < in_files.length; i++) {
      // use this, instead, for vanilla JS:
      // for (var i = 0; i < files.length; i++) {
        const a = i + 1;
        console.log('in loop, pass: ' + a);
        const f = in_files[i];  // or just files[i] in vanilla JS

        const reader = new FileReader();
        reader.onerror = this.errorHandler;
        reader.onprogress = this.progressHandler;
        reader.onload = this.processFile(f);
        reader.readAsDataURL(f);
      }      
   }
}

有一个关于语法的问题，对于 vanilla JS，关于如何获取该文件对象：

JavaScript/HTML5/jQuery Drag-And-Drop Upload - "Uncaught TypeError: Cannot read property 'files' of undefined"

请注意，React 的 DropZone 已经为您将 File 对象放入 this.state.files，只要您在构造函数中将 files: [], 添加到 this.state = { .... }。我从 post 关于如何获取 File 对象的答案中添加了语法。它应该可以工作，或者还有其他 post 可以提供帮助。但是 Q/A 告诉我的只是如何获取 File 对象，而不是 blob 数据本身。即使我像 sebu 的答案那样做了 fileData = new Blob([files[0]]);，由于某种原因它没有包含 var，它也没有告诉我如何读取该 blob 的内容，以及如何在没有一个承诺对象。所以这就是 FileReader 出现的地方，尽管我实际上尝试过并发现我无法使用它们的 readAsArrayBuffer 有任何用处。

您将必须拥有与此构造一起使用的其他功能 - 一个用于处理 onerror，一个用于 onprogress（均在下方显示），然后是主要功能，onload，一旦在最后一行调用了 reader 上的方法，它就会真正起作用。据我所知，基本上你是将 event.dataTransfer.files[0] 直接传递给 onload 函数。

因此 onload 方法调用我的 processFile() 函数（仅适用行）：

processFile(theFile) {
  return function(e) {
    const bytes = e.target.result.split('base64,')[1];
  }
}

并且bytes应该有base64字节。

附加功能：

errorHandler(e){
    switch (e.target.error.code) {
      case e.target.error.NOT_FOUND_ERR:
        alert('File not found.');
        break;
      case e.target.error.NOT_READABLE_ERR:
        alert('File is not readable.');
        break;
      case e.target.error.ABORT_ERR:
        break;    // no operation
      default:
        alert('An error occurred reading this file.');
        break;
    }
  }

progressHandler(e) {
    if (e.lengthComputable){
      const loaded = Math.round((e.loaded / e.total) * 100);
      let zeros = '';

      // Percent loaded in string
      if (loaded >= 0 && loaded < 10) {
        zeros = '00';
      }
      else if (loaded < 100) {
        zeros = '0';
      }

      // Display progress in 3-digits and increase bar length
      document.getElementById("progress").textContent = zeros + loaded.toString();
      document.getElementById("progressBar").style.width = loaded + '%';
    }
  }

以及适用的进度指示器标记：

<table id="tblProgress">
  <tbody>
    <tr>
      <td><b><span id="progress">000</span>%</b> <span className="progressBar"><span id="progressBar" /></span></td>
    </tr>                    
  </tbody>
</table>

和CSS：

.progressBar {
  background-color: rgba(255, 255, 255, .1);
  width: 100%;
  height: 26px;
}
#progressBar {
  background-color: rgba(87, 184, 208, .5);
  content: '';
  width: 0;
  height: 26px;
}

尾声：

在 processFile() 中，出于某种原因，我无法将 bytes 添加到我在 this.state 中创建的变量中。因此，我将它直接设置为变量 attachments，它位于我的 JSON 对象 RequestForm 中 - 与我的 this.state 使用的对象相同。 attachments 是一个数组，所以我可以推送多个文件。它是这样的：

  const fileArray = [];
  // Collect any existing attachments
  if (RequestForm.state.attachments.length > 0) {
    for (let i=0; i < RequestForm.state.attachments.length; i++) {
      fileArray.push(RequestForm.state.attachments[i]);
    }
  }
  // Add the new one to this.state
  fileArray.push(bytes);
  // Update the state
  RequestForm.setState({
    attachments: fileArray,
  });

那么，因为this.state已经包含了RequestForm:

this.stores = [
  RequestForm,    
]

从那以后我可以将其引用为 this.state.attachments。在 vanilla JS 中不适用的 React 特性。你可以用一个全局变量在普通 JavaScript 中构建一个类似的结构，并相应地推送，然而，更容易：

var fileArray = new Array();  // place at the top, before any functions

// Within your processFile():
var newFileArray = [];
if (fileArray.length > 0) {
  for (var i=0; i < fileArray.length; i++) {
    newFileArray.push(fileArray[i]);
  }
}
// Add the new one
newFileArray.push(bytes);
// Now update the global variable
fileArray = newFileArray;

然后你总是只引用 fileArray，为任何文件字节字符串枚举它，例如var myBytes = fileArray[0]; 第一个文件。

Answer 4

这是将文件转换为 Base64 并避免 "maximum call stack size exceeded at FileReader.reader.onload" 文件过大的简单方法。

document.querySelector('#fileInput').addEventListener('change',   function () {

    var reader = new FileReader();
    var selectedFile = this.files[0];

    reader.onload = function () {
        var comma = this.result.indexOf(',');
        var base64 = this.result.substr(comma + 1);
        console.log(base64);
    }
    reader.readAsDataURL(selectedFile);
}, false);

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

Answer 5

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);
      console.log(arrayBuffer);
        document.querySelector('#result').innerHTML = arrayBuffer + '  '+arrayBuffer.byteLength;
        }
    reader.readAsArrayBuffer(this.files[0]);
  }, false);

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

Answer 6

现代浏览器现在在 Blob 上具有 arrayBuffer 方法：

document.querySelector('input').addEventListener('change', async (event) => {
  const buffer = await event.target.files[0].arrayBuffer()
  console.log(buffer)
}, false)

Answer 7

这是获得实际最终字节数组的一个答案，只需使用 FileReader 和 ArrayBuffer：

 const test_function = async () => {

      ... ... ...

      const get_file_array = (file) => {
          return new Promise((acc, err) => {
              const reader = new FileReader();
              reader.onload = (event) => { acc(event.target.result) };
              reader.onerror = (err)  => { err(err) };
              reader.readAsArrayBuffer(file);
          });
       }
       const temp = await get_file_array(files[0])
       console.log('here we finally ve the file as a ArrayBuffer : ',temp);
       const fileb = new Uint8Array(fileb)

       ... ... ...

  }

其中 file 直接是您要读取的 File 对象，这必须在 async 函数中完成...

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

Getting byte array through input type = file

html

javascript

fileapi

[编辑]

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

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

Getting byte array through input type = file

html

javascript

fileapi

[编辑]

[旧答案]（已修改）

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