Saturday, May 25, 2024
 Popular · Latest · Hot · Upcoming
95
rated 0 times [  97] [ 2]  / answers: 1 / hits: 22346  / 11 Years ago, wed, january 8, 2014, 12:00:00

How can I access the binary representation with JavaScript from a file uploaded with a file input?:



<input type=file name=file>


I can access the details of the uploaded file successfully with:



$('[name=image]').get(0).files[0].name
// 2013-10-19 15.10.59.jpg

$('[name=image]').get(0).files[0].size
// 774016

$('[name=image]').get(0).files[0].type
// image/jpeg


But not the real representation.



I found this tutorial that makes use of:



document.getElementById(photo).files[0].getAsBinary()


However, that method doesn't exists in my browser (Chrome Canary 34.0.1772.0 on OS X 10.9).


More From » jquery

 Answers
17

From https://developer.mozilla.org/en-US/docs/Web/API/File.getAsBinary



Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.



It suggests:



Note: This method is obsolete; you should use the FileReader method readAsBinaryString() or readAsArrayBuffer() instead.



However, FileReader has several other read functions that might be more appropriate, like readAsDataURL() which lets you immediately use the file in web context (e.g as <img> src attribute), see the method listing for all options.


// Retrieve the first (and only, unless using the `multiple` attribute) File from the FileList object
const f = document.getElementById("photo").files[0];

if (f) {
const reader = new FileReader();
reader.onload = function(evt) {
const metadata = `name: ${f.name}, type: ${f.type}, size: ${f.size}, contents:`;
const contents = evt.target.result;
console.log(metadata, contents);
};
reader.readAsDataURL(f);
}

[#73307] Tuesday, January 7, 2014, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
allanw

Total Points: 421
Total Questions: 132
Total Answers: 102

Location: Trinidad and Tobago
Member since Fri, May 8, 2020
4 Years ago
;