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

【问题标题】：How to create an ArrayBuffer and data URI from Blob and File objects without FileReader?如何在没有 FileReader 的情况下从 Blob 和 File 对象创建 ArrayBuffer 和数据 URI？
【发布时间】：2016-11-06 20:14:28
【问题描述】：

这个问题与How to updoad in old browsers (ex Safari 5.1.4)相关并受其启发

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

迄今为止尝试过的方法已经

创建一个模拟WebSocket，将.binaryType设置为"arraybuffer"，创建一个MessageEvent，将event.data设置为File对象；结果是File 对象onmessage 处理程序
将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]()
将File 设置为FormData 对象，尝试将请求正文发布到<iframe>，诚然没有很好的构思；结果Bad Requestplnkr

预期结果：将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>

另见Display image from blob using javascript and websockets，How can you encode a string to Base64 in JavaScript?；有趣的是，我现在在问类似的问题https://stackoverflow.com/questions/34302231/is-there-any-way-to-convert-the-file-to-an-arraybuffer-without-filereader-api； Blob .slice() method , FileReader .readAsDataURL() method

【问题讨论】：

我手头没有 safari 5（顺便说一句，这个浏览器已被弃用多年，用户应尽快将其更改为最新版本），也没有支持 Blob 对象的浏览器（或File）但不支持FileReader。它真的存在吗？你是不是看错了方向？（一种解决方法是将文件上传到某处，然后使用 XHR 重新获取它，但首先尝试回答这些第一个问题）
@Kaiido “也不是支持 Blob 对象（或文件）但不支持 FileReader 的浏览器。它真的存在吗？” 无权访问 safari在这里，要么。根据MDN浏览器兼容性，safari 1.0版本支持<input type="file">，5.1版本支持Blob，6.0版本支持FileReader； responseType "blob" 和 "arraybuffer" 在 XMLHttpRequest 状态 "Yes"。好奇原始数据是如何在Blob 对象中实际存储和访问的？
可能是一个早期的实现......可惜它也不支持 URL.createObjectURL，否则你可以尝试像var url = URL.createObjectURL(blob); var xhr = new XMLHttpRequest(); xhr.onload = function(){ rawData = this.response; } xhr.open('get', url) xhr.send(); 这样简单的东西。 ps 说早期的实现，可以看到IE9不支持TypedArray，但是还是有一种通过canvas'imageData对象的。
@Kaiido 是的，很好奇这个过程是如何被讨论的正在实施或实施的；也就是说，访问存储在Blob 或input.files 1.0-5.1 对象中的原始数据？如果Blob 是一个对象，则原始数据存储在对象中，是吗？提出问题的另一种方法是如何遵循FileReader 的算法，使用算法中的步骤从头开始创建FileReader 实现 - 不使用FileReader
请阅读这篇文章what-to-use-instead-of-filereader-for-safari

标签： javascript blob fileapi data-uri typed-arrays

【解决方案1】：

我只是放在这里：

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>

【讨论】：