通过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 []值发布到以apip []格式接收的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的更强大方法,可以参考此答案.

[旧答案] _(修改)

是的,<input type="file"/>由于FileReader对象及其方法,文件API确实提供了将文件转换为二进制字符串的方法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

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

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

Answer 3

这是一篇很长的文章，但我厌倦了所有这些对我不起作用的示例，因为它们使用了 Promise 对象或this在使用 Reactjs 时具有不同含义的错误。我的实现是使用带有 reactjs 的 DropZone，我使用类似于以下站点上发布的框架获取字节，但上面的其他内容都不起作用：https : //www.mokuji.me/article/drop-upload-教程-1。对我来说，有两个键：

1. 您必须使用 FileReader 的 onload 函数并在其期间从事件对象中获取字节。

2. 我尝试了各种组合，但最终，有效的是：

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

活动在哪里e。React 需要const，您可以var在纯 Javascript 中使用。但这给了我 base64 编码的字节字符串。

因此，我将包括用于集成它的适用行，就像您使用 React 一样，因为这就是我构建它的方式，但也尝试对此进行概括，并在必要时添加注释，使其适用于 vanilla Javascript实现 - 警告说我没有在这样的构造中使用它来测试它。

这些将是顶部、构造函数、React 框架中的绑定（与 vanilla 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);

您将拥有onDrop={this.uploadFile}DropZone 元素。如果您在没有 React 的情况下执行此操作，这相当于添加您要在单击“上传文件”按钮时运行的 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 拖放上传 - “未捕获的类型错误：无法读取未定义的属性‘文件’”

请注意，React 的 DropZone 已经this.state.files为您放入 File 对象，只要files: [],您this.state = { .... }在构造函数中添加到您的。我从那篇关于如何获取 File 对象的帖子的答案中添加了语法。它应该有效，或者那里有其他帖子可以提供帮助。但 Q/A 告诉我的只是如何获取File对象，而不是 blob 数据本身。即使我确实fileData = new Blob([files[0]]);喜欢 sebu 的回答，var但由于某种原因没有包含在其中，它也没有告诉我如何阅读该 blob 的内容，以及如何在没有 Promise 对象的情况下进行阅读。所以这就是 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. 因此，相反，我将它直接设置为attachmentsJSON 对象中的变量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

$(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>