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

问题描述 投票：19回答：4

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调用之前，我需要先将字节数组存储在变量中

javascript html html5 fileapi
4个回答
38
投票

[编辑]

如上面的评论中所述，虽然仍然在某些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>
5
投票

$(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>
3
投票

这是一个很长的帖子，但我厌倦了所有这些不适合我的例子，因为他们使用了Promise对象或者在使用Reactjs时具有不同含义的错误this。我的实现是使用带有reactjs的DropZone，我使用类似于以下网站发布的框架获得字节，当上面没有其他任何工作时：https://www.mokuji.me/article/drop-upload-tutorial-1。对我来说有两把钥匙：

  1. 您必须使用和在FileReader的onload函数期间从事件对象获取字节。
  2. 我尝试了各种组合，但最终，有效的是： const bytes = e.target.result.split('base64,')[1];

哪里有e事件。 React需要const，你可以在普通的Javascript中使用var。但这给了我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);

你的DropZone元素中有onDrop={this.uploadFile}。如果您在没有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 Drag-And-Drop Upload - "Uncaught TypeError: Cannot read property 'files' of undefined"

请注意，只要在构造函数中将this.state.files添加到files: [],中，React的DropZone就已经将File对象放入this.state = { .... }中了。我在该帖子的答案中添加了关于如何获取File对象的语法。它应该工作，或者那里有其他帖子可以提供帮助。但Q / A告诉我的是如何获取File对象，而不是blob数据本身。即使我在sebu的答案中做了fileData = new Blob([files[0]]);，由于某种原因不包括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中雕刻的变量中。所以，相反，我将它直接设置为变量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。您可以使用全局变量在纯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];为第一个文件。

1
投票

这是将文件转换为Base64的简单方法，并避免“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" />
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.