如何在没有FileReader的情况下从Blob和File对象创建ArrayBuffer和数据URI? [英] How to create an ArrayBuffer and data URI from Blob and File objects without FileReader?
问题描述
此问题与如何在旧版浏览器(例如Safari 5.1.4)中进行升级
鉴于具有files
属性的<input type="file">
元素包含从Blob
继承的File
对象,是否可以创建ArrayBuffer
并将ArrayBuffer
从ArrayBuffer
转换为data URI
c3>或File
对象而不使用FileReader
?
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
?
迄今为止尝试过的方法
-
创建一个模拟
WebSocket
,并将.binaryType
设置为"arraybuffer"
,创建一个MessageEvent
,将event.data
设置为File
对象;结果是onmessage
处理程序中的File
对象
create a mock
WebSocket
with.binaryType
set to"arraybuffer"
, create aMessageEvent
withevent.data
set toFile
object; result isFile
object atonmessage
handler
将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]()
set prototype of File
to ArrayBuffer
, Uint8Array
; result is 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
set File
at FormData
object, attempt to post request body to <iframe>
, admittedly not well-conceived; result Bad Request
at plnkr
预期结果:将Blob
和File
对象转换为TypedArray
,然后转换为 data URL
,或直接转到data URL
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.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吗?;有趣的是,现在我正在问类似的问题 Blob
.slice()
方法,
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.com/questions/34302231/is-there-any-way-to-convert-the-file-to-an-arraybuffer-without-filereader-api ; Blob
.slice()
method , FileReader
.readAsDataURL()
method
推荐答案
我只是将其放在此处:
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>
这篇关于如何在没有FileReader的情况下从Blob和File对象创建ArrayBuffer和数据URI?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!