JS에서 파일을 읽는 방법

JavaScript로 브라우저에서 파일을 읽는 방법은 무엇입니까? 기사에서 자세히 공유하겠습니다.

JavaScript의 Web API에는 새로운 방식의 File API가 있기 때문에 백엔드 서버를 사용하지 않고도 브라우저에서 파일을 읽고 데이터를 처리하는 것이 더 편리합니다.

FileReader는 파일에서 데이터를 읽고 이를 JavaScript 변수에 저장합니다. 이는 XMLHttpRequest와 동일한 의미를 가지며 읽기 작업은 비동기식입니다. 이는 브라우저가 차단되지 않는다는 장점이 있습니다. . 읽기 작업에는 다음과 같은 다양한 방법이 있습니다.

(1) readAsText() – 파일 내용을 일반 텍스트 형식으로 반환합니다.

readAsText() 메서드를 사용하여 텍스트 파일을 읽을 수 있습니다. 이 메소드에는 두 개의 매개변수가 있습니다. 첫 번째 매개변수는 읽을 파일 또는 Blob 개체입니다. 두 번째 매개변수는 파일의 인코딩을 지정하는 데 사용됩니다. 두 번째 매개변수는 선택사항입니다. 지정하지 않으면 기본적으로 UTF-8 인코딩이 사용됩니다. 설정에서 파일이 로드된 후 이벤트 리스너를 설정해야 합니다. onload 이벤트가 호출되면 결과 속성 FileReader를 통해 얻은 파일의 내용을 확인할 수 있습니다.

<input type="file" id="file" />
	<script type="text/javascript">
var file=document.getElementById("file");
var reader = new FileReader();
reader.onload=function(e){
	var text=reader.result;
}
reader.readAsText(file);
</script>

(2) readAsArrayBuffer() 메소드

이 메소드는 Blob 또는 File 객체를 읽고 ArrayBuffer를 생성합니다. 읽기 작업이 완료되면 ReadyState가 done(완료)으로 변경되고 loadend 이벤트가 트리거됩니다. 동시에 결과 속성에는 읽기 파일의 데이터를 나타내는 ArrayBuffer 객체가 포함됩니다. 데이터 버퍼. JPEG 이미지를 PNG로 변환하는 등 파일을 조작할 때

<script type="text/javascript">
var file=document.getElementById("file");
var reader = new FileReader();
reader.onload=function(e){
	var readAsArrayBuffer=reader.result;
}
reader.readAsArrayBuffer(file);
</script>

(3) readAsDataURL()은 파일 내용을 데이터 URL 형식으로 반환합니다

이 메서드는 파일 또는 Blob을 받아 데이터 URL을 생성합니다. 기본적으로 파일 데이터의 base64 인코딩 문자열을 사용하여 src 이미지 속성 및 기타 콘텐츠를 설정할 수 있습니다. 위의 세 가지 메서드는 사용 중에 읽기를 시작하기 전에 로드 이벤트를 수신해야 하며 event.target .result는 읽기 결과를 반환합니다. .

요약: 위의 내용이 이 글의 전부입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

위 내용은 JS에서 파일을 읽는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!