This Question is related to and inspired by How to updoad in old browsers (ex 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?
Approaches have tried so far have been
create a mock
WebSocketwith.binaryTypeset to"arraybuffer", create aMessageEventwithevent.dataset toFileobject; result isFileobject atonmessagehandlerset prototype of
FiletoArrayBuffer,Uint8Array; result isUncaught TypeError: Method ArrayBuffer.prototype.byteLength called on inpatible receiver #<ArrayBuffer>(),Uncaught TypeError: Method get TypedArray.prototype.byteLength called on inpatible receiver [object Object]()set
FileatFormDataobject, attempt to post request body to<iframe>, admittedly not well-conceived; resultBad Requestat plnkr
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 /
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? ; interestingly ironic as am now asking similar Question ; Blob .slice() method , FileReader .readAsDataURL() method
This Question is related to and inspired by How to updoad in old browsers (ex 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?
Approaches have tried so far have been
create a mock
WebSocketwith.binaryTypeset to"arraybuffer", create aMessageEventwithevent.dataset toFileobject; result isFileobject atonmessagehandlerset prototype of
FiletoArrayBuffer,Uint8Array; result isUncaught TypeError: Method ArrayBuffer.prototype.byteLength called on inpatible receiver #<ArrayBuffer>(),Uncaught TypeError: Method get TypedArray.prototype.byteLength called on inpatible receiver [object Object]()set
FileatFormDataobject, attempt to post request body to<iframe>, admittedly not well-conceived; resultBad Requestat plnkr
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/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? ; interestingly ironic as am now asking similar Question https://stackoverflow./questions/34302231/is-there-any-way-to-convert-the-file-to-an-arraybuffer-without-filereader-api ; Blob .slice() method , FileReader .readAsDataURL() method
-
I don't have safari 5 at hand (btw this browser is deprecated for years users should change it to an up-to-date one ASAP), nor a browser that does support
Blobobjects (orFile) but doesn't support theFileReader. Does it really exists? aren't you looking the wrong way? (one workaround would be to upload the File somewhere and then refetch it with XHR but try to answer these first questions first) – Kaiido Commented Jul 5, 2016 at 6:14 -
1
@Kaiido "nor a browser that does support Blob objects (or File) but doesn't support the FileReader. Does it really exists?" Do not have access to safari here, either. According to MDN browser patibility,
<input type="file">is supported at version 1.0 of safari,Blobat 5.1,FileReaderat 6.0;responseType"blob"and"arraybuffer"atXMLHttpRequeststate"Yes". Curious how raw data is actually stored, accessed withinBlobobject? – guest271314 Commented Jul 5, 2016 at 6:57 -
Probably an early implementation... Too bad it doesn't support URL.createObjectURL either, otherwise you could have tried something as simple as
var url = URL.createObjectURL(blob); var xhr = new XMLHttpRequest(); xhr.onload = function(){ rawData = this.response; } xhr.open('get', url) xhr.send();. Ps talking about early implementations, you can see that IE9 didn't support TypedArray, but still had one kind through canvas'imageDataobject. – Kaiido Commented Jul 5, 2016 at 7:09 -
@Kaiido Yes, curious how the process was discussed being implemented, or implemented; that is, accessing raw data stored in
Blob, orinput.filesobject at 1.0-5.1? IfBlobis an object, the raw data is stored within object, yes? Another way to ask Question would be how to follow algorithm forFileReaderto create aFileReaderimplementation from scratch using steps in algorithm - without usingFileReader– guest271314 Commented Jul 5, 2016 at 7:24 - 1 Read this post please what-to-use-instead-of-filereader-for-safari – Alex Nikulin Commented Jul 12, 2016 at 5:03
1 Answer
Reset to default 2I 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> 发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742417939a4440107.html
评论列表（0条）