Как создать ArrayBuffer и URI данных из объектов Blob и File без FileReader?
Этот вопрос связан и вдохновленКак обновить в старых браузерах (например, Safari 5.1.4)
Учитывая<input type="file">
элемент, имеющийfiles
свойство, содержащееFile
объекты, которые наследуются отBlob
Можно ли создатьArrayBuffer
и преобразоватьArrayBuffer
кdata URI
изBlob
или жеFile
объект без использованияFileReader
?
Подходы пытались до сих пор были
создать издевательствоWebSocket
с.binaryType
установлен в"arraybuffer"
, создатьMessageEvent
сevent.data
установлен вFile
объект; результатFile
объект вonmessage
обработчик
установить прототип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]()
задаватьFile
вFormData
объект, попытка отправить тело запроса в<iframe>
по общему признанию не хорошо продуманный; результатBad Request
вplnkr
Ожидаемый результат: конвертировать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>
Смотрите такжеОтображение изображения из BLOB-объекта с использованием JavaScript и веб-сокетов , Как вы можете кодировать строку в Base64 в JavaScript? ; интересно иронично как сейчас задаю подобный вопросhttps://stackoverflow.com/questions/34302231/is-there-any-way-to-convert-the-file-to-an-arraybuffer-without-filereader-api ; Blob
.slice()
метод , FileReader
.readAsDataURL()
метод