Javascript - Reading a File and Getting its Binary Data

The binary data of a local file selected by the user can be retrieved using the readAsBinaryString() method of a FileReader object.
로컬파일의 바이너리 데이터는 FileReader 오브젝트의 readAsBinaryString() 함수를 이용해서 읽을 수 있다. 

The readAsBinaryString method of a FileReader object asynchronously reads the file. The load event is fired once reading is finished and raw binary data is available.
readAsBinaryString 함수는 비동기적으로 파일을 읽는다. 로드 이벤트는 읽기가 완료되고 원시 바이너리 데이터를 사용할 수 있게되면 시작된다.

HTML

<input type="file" id="file" />
<button id="read-file">Read File</button>

 

Javascript

document.querySelector("#read-file").addEventListener('click', function() {
	// no file selected to read
	if(document.querySelector("#file").value == '') {
		console.log('No file selected');
		return;
	}

	var file = document.querySelector("#file").files[0];

	var reader = new FileReader();
	reader.onload = function(e) {
		// binary data
		console.log(e.target.result);
	};
	reader.onerror = function(e) {
		// error occurred
		console.log('Error : ' + e.type);
	};
	reader.readAsBinaryString(file);
});

 

출처: usefulangle.com/post/297/javascript-get-file-binary-data

Reading a File and Getting its Binary Data in Javascript

---

File and FileReader

A File object inherits from Blob and is extended with filesystem-related capabilities.
File 개체는 Blob에서 상속되며 파일 시스템 관련 기능으로 확장됩니다.

FileReader is an object with the sole purpose of reading data from Blob (and hence File too) objects.
FileReader는 Blob (따라서 File도) 개체에서 데이터를 읽는 유일한 목적을 가진 개체입니다.

<read* methods> 

- readAsArrayBuffer – for binary files, to do low-level binary operations. For high-level operations, like slicing, File inherits from Blob, so we can call them directly, without reading.
바이너리 파일에 대해, 저수준 바이너리 연산을 수행합니다. 슬라이싱과 같은 고급 작업의 경우 File은 Blob에서 상속하므로 읽지 않고 직접 호출 할 수 있습니다.
- readAsText – for text files, when we’d like to get a string.  문자열을 가져 오려는 텍스트 파일의 경우.
- readAsDataURL – read the binary data and encode it as base64 data url when we’d like to use this data in src for img or another tag. 바이너리 데이터를 읽고 base64 데이터 URL로 인코딩합니다. (img 또는 다른 태그의 src 안에 이 데이터를 사용하고 싶을 때)

출처: docs.fileformat.com/cad/ifc/