Wie erstelle ich einen ArrayBuffer und einen Daten-URI aus Blob- und File-Objekten ohne FileReader?
Diese Frage bezieht sich auf und ist inspiriert vonWie aktualisiere ich in alten Browsern (ab Safari 5.1.4)?
Given an<input type="file">
Element mit einemfiles
Eigenschaft mitFile
Objekte, die von @ erbBlob
, ist es möglich ein @ zu erstellArrayBuffer
und konvertiere dasArrayBuffer
zu einerdata URI
von einemBlob
oderFile
Objekt ohneFileReader
?
Ansätze haben bisher versucht worden
create a mockWebSocket
mit.binaryType
einstellen"arraybuffer"
, ein ... kreierenMessageEvent
mitevent.data
einstellenFile
Objekt; Ergebnis istFile
Objekt beionmessage
handler
set Prototyp vonFile
zuArrayBuffer
, Uint8Array
; Ergebnis istUncaught TypeError: Method ArrayBuffer.prototype.byteLength called on incompatible receiver #<ArrayBuffer>()
, Uncaught TypeError: Method get TypedArray.prototype.byteLength called on incompatible receiver [object Object]()
einstellenFile
beimFormData
Objekt, Versuch, den Anfragetext an @ zu send<iframe>
zugegebenermaßen nicht gut durchdacht; ErgebnisBad Request
beim plnkr
Erwartetes Ergebnis: KonvertiereBlob
undFile
Objekte zuTypedArray
dann zudata URL
oder direkt zudata 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>
Siehe auchBild von Blob mit Javascript und Websockets anzeigen , Wie können Sie eine Zeichenfolge in JavaScript in Base64 kodieren?; interessanterweise ironisch, da ich jetzt eine ähnliche Frage stellehttps: //stackoverflow.com/questions/34302231/ist-jeder-weg-zum-konvertieren-der-Datei-in-Anordnungspuffer-ohne-Filtereader-ap ; Blob
.slice()
Method , FileReader
.readAsDataURL()
Method