admin管理员组

文章数量:1336660

This Question is related to and inspired by How to updoad in old browsers (ex Safari 5.1.4)

Given an <input type="file"> element having a files property containing File objects which inherit from Blob, is it possible to create a ArrayBuffer and convert the ArrayBuffer to a data URI from a Blob or File object without using FileReader?

Approaches have tried so far have been

  • create a mock WebSocket with .binaryType set to "arraybuffer", create a MessageEvent with event.data set to File object; result is File object at onmessage handler

  • set prototype of File to ArrayBuffer, Uint8Array; result is Uncaught TypeError: Method ArrayBuffer.prototype.byteLength called on inpatible receiver #<ArrayBuffer>(), Uncaught TypeError: Method get TypedArray.prototype.byteLength called on inpatible receiver [object Object]()

  • set File at FormData object, attempt to post request body to <iframe>, admittedly not well-conceived; result Bad Request at plnkr

Expected result: Convert Blob and File objects to TypedArray then to data URL, or directly to 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 /
    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>

See also Display image from blob using javascript and websockets , How can you encode a string to Base64 in JavaScript? ; interestingly ironic as am now asking similar Question ; Blob .slice() method , FileReader .readAsDataURL() method

This Question is related to and inspired by How to updoad in old browsers (ex Safari 5.1.4)

Given an <input type="file"> element having a files property containing File objects which inherit from Blob, is it possible to create a ArrayBuffer and convert the ArrayBuffer to a data URI from a Blob or File object without using FileReader?

Approaches have tried so far have been

  • create a mock WebSocket with .binaryType set to "arraybuffer", create a MessageEvent with event.data set to File object; result is File object at onmessage handler

  • set prototype of File to ArrayBuffer, Uint8Array; result is Uncaught TypeError: Method ArrayBuffer.prototype.byteLength called on inpatible receiver #<ArrayBuffer>(), Uncaught TypeError: Method get TypedArray.prototype.byteLength called on inpatible receiver [object Object]()

  • set File at FormData object, attempt to post request body to <iframe>, admittedly not well-conceived; result Bad Request at plnkr

Expected result: Convert Blob and File objects to TypedArray then to data URL, or directly to 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/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>

See also Display image from blob using javascript and websockets , How can you encode a string to Base64 in JavaScript? ; interestingly ironic as am now asking similar Question https://stackoverflow./questions/34302231/is-there-any-way-to-convert-the-file-to-an-arraybuffer-without-filereader-api ; Blob .slice() method , FileReader .readAsDataURL() method

  • javascript
  • blob
  • fileapi
  • data-uri
  • typed-arrays
Share Improve this question edited Oct 7, 2021 at 7:34 CommunityBot 11 silver badge asked Jul 5, 2016 at 5:37 guest271314guest271314 1 10
  • I don't have safari 5 at hand (btw this browser is deprecated for years users should change it to an up-to-date one ASAP), nor a browser that does support Blob objects (or File) but doesn't support the FileReader. Does it really exists? aren't you looking the wrong way? (one workaround would be to upload the File somewhere and then refetch it with XHR but try to answer these first questions first) – Kaiido Commented Jul 5, 2016 at 6:14
  • 1 @Kaiido "nor a browser that does support Blob objects (or File) but doesn't support the FileReader. Does it really exists?" Do not have access to safari here, either. According to MDN browser patibility, <input type="file"> is supported at version 1.0 of safari, Blob at 5.1, FileReader at 6.0; responseType "blob" and "arraybuffer" at XMLHttpRequest state "Yes". Curious how raw data is actually stored, accessed within Blob object? – guest271314 Commented Jul 5, 2016 at 6:57
  • Probably an early implementation... Too bad it doesn't support URL.createObjectURL either, otherwise you could have tried something as simple as var url = URL.createObjectURL(blob); var xhr = new XMLHttpRequest(); xhr.onload = function(){ rawData = this.response; } xhr.open('get', url) xhr.send();. Ps talking about early implementations, you can see that IE9 didn't support TypedArray, but still had one kind through canvas' imageData object. – Kaiido Commented Jul 5, 2016 at 7:09
  • @Kaiido Yes, curious how the process was discussed being implemented, or implemented; that is, accessing raw data stored in Blob, or input.files object at 1.0-5.1? If Blob is an object, the raw data is stored within object, yes? Another way to ask Question would be how to follow algorithm for FileReader to create a FileReader implementation from scratch using steps in algorithm - without using FileReader – guest271314 Commented Jul 5, 2016 at 7:24
  • 1 Read this post please what-to-use-instead-of-filereader-for-safari – Alex Nikulin Commented Jul 12, 2016 at 5:03
 |  Show 5 more ments

1 Answer 1

Reset to default 2

I just put it here:

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>

本文标签：

版权声明：本文标题：javascript - How to create an ArrayBuffer and data URI from Blob and File objects without FileReader? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742417939a2471081.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。