如何在没有 FileReader 的情况下从 Blob 和 File 对象创建 ArrayBuffer 和数据 URI

How to create an ArrayBuffer and data URI from Blob and File objects without FileReader?

本文关键字：对象 File 创建 ArrayBuffer URI 数据 Blob FileReader 情况下      更新时间：2023-09-26

这个问题与如何在旧浏览器中更新(例如 Safari 5.1.4(相关并受到启发

给定一个具有files属性的<input type="file">元素，其中包含从Blob继承File对象，是否可以创建一个ArrayBuffer并将ArrayBuffer转换为Blob或File对象的data URI而不使用FileReader？

到目前为止已经尝试过的方法

  • 创建一个.binaryType设置为 "arraybuffer" 的模拟WebSocket，创建一个event.data设置为File对象的MessageEvent;结果是onmessage处理程序处File对象

  • 将File的原型设置为ArrayBuffer，Uint8Array;结果为Uncaught TypeError: Method ArrayBuffer.prototype.byteLength called on incompatible receiver #<ArrayBuffer>()，Uncaught TypeError: Method get TypedArray.prototype.byteLength called on incompatible receiver [object Object]()

  • 在FormData对象上设置File，尝试将请求正文发布到<iframe>，诚然构思不佳; 结果Bad Request在 PLNKR

预期结果：将Blob和File对象转换为TypedArray，然后转换为data URL，或直接转换为data URL 

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <form method="get" entype="multipart/form-data" target="binaryFrame">
    <input id="#avatar" type="file" name="file" />
    <input type="submit" />
  </form>
  <iframe name="binaryFrame"></iframe>
  <script>
    var input = document.querySelector("input[type=file]");
    input.addEventListener("change", handleFiles, true);
    // see http://jsfiddle.net/adamboduch/JVfkt/
    var sock = new WebSocket("ws://mock");
    sock.binaryType = "arraybuffer";
    sock.onerror = function(e) {
        console.log("sock error", e); // ignore, here
      }
    sock.onmessage = function(e) {
      console.log("socket message", e.data, e.data instanceof ArrayBuffer);
    };
    function handleFiles(evnet) {
      var file = event.target.files[0];
      sock.dispatchEvent(new MessageEvent("message", {
        data: file
      }));
      var data = new FormData();
      data.append("file", file);
      document.forms[0].action = data;
    }
  </script>
</body>
</html>
<小时 />

另请参阅使用 JavaScript 和 websocket 显示来自 blob 的图像，如何在 JavaScript 中将字符串编码为 Base64？ ; 有趣的是，我现在问类似的问题 https://stackoverflow.com/questions/34302231/is-there-any-way-to-convert-the-file-to-an-arraybuffer-without-filereader-api; Blob .slice()方法、FileReader .readAsDataURL()方法

我只是把它放在这里：

var input = document.querySelector("input[type=file]");
input.addEventListener("change", handleFiles, true);
// for url
window.URL = window.URL || window.webkitURL;
function handleFiles(evnet) {
  var file = event.target.files[0];
  document.querySelector('iframe')
    .setAttribute('src', window.URL.createObjectURL(file));
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <form method="get" entype="multipart/form-data" target="binaryFrame">
    <input id="#avatar" type="file" name="file" />
    <input type="submit" />
  </form>
  <iframe name="binaryFrame"></iframe>
</body>
</html>

相关文章：