javascript filereader 예제

파일을 로드하는 가장 간단한 방법은 표준 요소를 사용하는 것입니다. 자바 스크립트는 파일 목록으로 선택한 파일 개체의 목록을 반환합니다. 다음은 `다중` 특성을 사용하여 한 번에 여러 파일을 선택할 수 있도록 하는 예제입니다. 이 예제에서는 FileReader의 readAsDataURL 메서드를 사용하여 파일 내용을 src 특성에 대한 이미지 데이터 URI로 사용할 수 있는 base64 인코딩된 문자열로 변환합니다. 다른 FileReader 읽기 형식에는 readAsText, readAsArrayBuffer 및 readAsBinaryString이 포함됩니다. 이러한 각 메서드는 HTTP 요청을 시작하는 XHR 개체의 send() 메서드와 유사한 파일 읽기를 시작합니다. 따라서 읽기를 시작하기 전에 로드 이벤트를 들어야 합니다. 읽기의 결과는 항상 event.target.result로 표시됩니다. 예: 아주 잘 쓰여진 기사입니다. 여러분의 예는 여러분이 시연하고 있는 기술에 방해가 되지 않을 만큼 간단했지만, 유용하지 않을 정도로 간단하지는 않았습니다. 이 예제는 입력 내에서 이미지를 선택하도록 요청합니다. 사용자가 컴퓨터에서 이미지를 선택하면 이미지가 페이지에 표시됩니다.

이전 예제의 입력 필드로 파일을 드래그해 보십시오. HTML5는 마지막으로 파일 API 사양을 통해 로컬 파일과 상호 작용하는 표준 방법을 제공합니다. 해당 기능의 예로 File API를 사용하여 이미지가 서버로 전송될 때 미리 보기로 만들거나 사용자가 오프라인 상태에서 앱에서 파일 참조를 저장할 수 있습니다. 또한 클라이언트 측 논리를 사용하여 업로드의 mimetype이 파일 확장명과 일치하는지 확인하거나 업로드 크기를 제한할 수 있습니다. 데이터 URI를 읽기 위해 동일한 기본 설정을 사용할 수 있습니다. 예를 들어 디스크에서 방금 읽은 이미지를 표시하려는 경우 데이터 URI(데이터 URL이라고도 함)가 흥미로운 옵션입니다. 다음 코드로 수행 할 수 있습니다 : 원시 이미지 데이터 (YUV, RGB …)를 표시하려고합니다. readAsArrayBuffer() API가있는 파일 리더를 사용하여 파일리더에서 읽을 수 있습니다.

javascript filereader 예제