[英]How to create an ArrayBuffer and data URI from Blob and File objects without FileReader?
This Question is related to and inspired by How to updoad in old browsers (ex Safari 5.1.4)此问题与如何在旧浏览器(例如 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
?给定一个<input type="file">
元素,该元素的files
属性包含从Blob
继承的File
对象,是否可以创建一个ArrayBuffer
并将ArrayBuffer
转换为Blob
或File
对象中的data URI
而不使用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;创建一个.binaryType
设置为"arraybuffer"
的模拟WebSocket
,创建一个MessageEvent
并将event.data
设置为File
对象; result is File
object at onmessage
handler结果是onmessage
处理程序中的File
对象
set prototype of File
to ArrayBuffer
, Uint8Array
;将File
原型设置为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]()
结果是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 File
at FormData
object, attempt to post request body to <iframe>
, admittedly not well-conceived;在FormData
对象上设置File
,尝试将请求正文发布到<iframe>
,诚然构思不佳; result Bad Request
at plnkr结果plnkr 的Bad Request
Expected result: Convert Blob
and File
objects to TypedArray
then to data URL
, or directly to data URL
预期结果:将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>
See also Display image from blob using javascript and websockets , How can you encode a string to Base64 in JavaScript?另请参阅使用 javascript 和 websockets 显示 blob 中的图像, 如何在 JavaScript 中将字符串编码为 Base64? ; ; 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 ;有趣的是具有讽刺意味,因为我现在问类似的问题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 Blob
.slice()
方法、 FileReader
.readAsDataURL()
方法
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.