Diese Frage an und von How to updoad in old browsers (ex Safari 5.1.4)Wie erstellt man einen ArrayBuffer und einen Daten-URI von Blob- und File-Objekten ohne FileReader?
Gegeben inspiriert bezogen ist ein <input type="file"> Element eine files Eigenschaft enthält File Objekte, die sich von Blob erben, ist es möglich, eine ArrayBuffer und wandeln die ArrayBuffer zu einem data URI von einem Blob oder File zu erstellen Objekt ohne Verwendung FileReader?
Ansätze haben versucht bisher
zu
"arraybuffer", schaffen eineMessageEventmitevent.dataSatzFileObjekt eine mockWebSocketmit.binaryTypeSatz erstellen; Ergebnis istFileObjekt amonmessagehandlerset Prototyp
FilezuArrayBuffer,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]()gesetzt
FilebeiFormDataObjekt, Versuch Anfrage Körper zu schreiben, allerdings nicht gut konzipierte; ErgebnisBad Requestbei plnkr
Erwartetes Ergebnis: Konvertieren Blob und File Objekte TypedArray dann data URL oder direkt an 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>
Siehe auch Display image from blob using javascript and websockets, How can you encode a string to Base64 in JavaScript?; interessanterweise ironisch wie ich jetzt ähnliche Frage frage 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
Ich habe keine Safari 5 zur Hand (obwohl dieser Browser seit Jahren veraltet ist, sollten Benutzer es so schnell wie möglich ändern) oder einen Browser, der 'Blob'-Objekte (oder' Datei' unterstützt)) unterstützt jedoch nicht den 'FileReader'. Gibt es das wirklich? Schaust du nicht in die falsche Richtung? (Eine Möglichkeit wäre, die Datei irgendwo hochzuladen und dann mit XHR erneut zu holen, aber zuerst diese ersten Fragen zu beantworten) – Kaiido
@Kaiido _ "noch ein Browser, der Blob-Objekte (oder Datei) unterstützt, aber den FileReader nicht unterstützt. Gibt es das wirklich? "_ Auch hier haben Sie keinen Zugang zu Safari. Laut der MDN-Browserkompatibilität wird '' in Version 1.0 von Safari, 'Blob' in 5.1,' FileReader' in 6 unterstützt.0; 'responseType'' "blob" 'und' "arraybuffer" 'bei' XMLHttpRequest' state '" Yes "'. Neugierig, wie rohe Daten tatsächlich gespeichert sind, auf die innerhalb des "Blob" -Objekts zugegriffen wird? – guest271314
Wahrscheinlich eine frühe Implementierung ... Zu schade, dass URL.createObjectURL auch nicht unterstützt wird, sonst hätten Sie etwas so einfaches ausprobieren können wie 'var url = URL.createObjectURL (blob); var xhr = neue XMLHttpRequest(); xhr.onload = function() { rawData = this.response; } xhr.open ('get', url) xhr.send(); '. Wenn man über frühe Implementierungen spricht, kann man sehen, dass IE9 TypedArray nicht unterstützt, aber immer noch eine Art durch canvas imageData-Objekt hat. – Kaiido