javascript filereader 예제

HTML5는 마지막으로 파일 API 사양을 통해 로컬 파일과 상호 작용하는 표준 방법을 제공합니다. 해당 기능의 예로 File API를 사용하여 이미지가 서버로 전송될 때 미리 보기로 만들거나 사용자가 오프라인 상태에서 앱에서 파일 참조를 저장할 수 있습니다. 또한 클라이언트 측 논리를 사용하여 업로드의 mimetype이 파일 확장명과 일치하는지 확인하거나 업로드 크기를 제한할 수 있습니다. 이 예제는 입력 내에서 이미지를 선택하도록 요청합니다. 사용자가 자신의 컴퓨터에서 이미지를 선택하면 이미지가 페이지에 표시됩니다. onload 처리기는 파일을 성공적으로 읽을 때 호출되지만 어떤 이유로 파일을 읽지 않은 경우 onerror 처리기가 호출됩니다. FileReader 인스턴스는 event.target을 통해 이벤트 처리기 내에서 사용할 수 있으며 판독기 변수를 직접 참조하는 대신 이 인스턴스를 사용하는 것이 좋습니다. 결과 속성에는 성공에 대한 파일 내용이 포함되어 있으며 오류에는 실패한 작업에 대한 오류 정보가 포함되어 있습니다. 원시 이미지 데이터 (YUV, RGB …)를 표시하려고합니다. readAsArrayBuffer() API가있는 파일 리더를 사용하여 파일리더에서 읽을 수 있습니다. 그러나 어떻게 표시합니까? 나는 NaCL과 함께 자바 스크립트와 HTML을 사용하고 나는이 초보자입니다. 이제 FileReader API의 작동 방식을 이해하면 몇 가지 예제를 살펴보겠습니다.

다음 예제에서는 파일의 청크 읽기를 보여 줍니다. 주목할 만한 점은 온로드 엔드를 사용하고 onload 이벤트를 사용하는 대신 evt.target.readyState를 검사한다는 것입니다. 데이터 URI를 읽기 위해 동일한 기본 설정을 사용할 수 있습니다. 예를 들어 디스크에서 방금 읽은 이미지를 표시하려는 경우 데이터 URI(데이터 URL이라고도 함)가 흥미로운 옵션입니다. 다음 코드를 사용하여 수행할 수 있습니다. 따라서 읽기를 시작하기 전에 로드 이벤트를 들어야 합니다. 읽기의 결과는 항상 event.target.result로 표시됩니다. 예를 들어 파일을 로드하는 가장 간단한 방법은 표준 요소를 사용하는 것입니다. 자바 스크립트는 파일 목록으로 선택한 파일 개체의 목록을 반환합니다. 다음은 `다중` 특성을 사용하여 한 번에 여러 파일을 선택할 수 있도록 하는 예제입니다.

다른 FileReader 읽기 형식에는 readAsText, readAsArrayBuffer 및 readAsBinaryString이 포함됩니다. 경우에 따라 전체 파일을 메모리로 읽는 것이 최선의 선택이 아닙니다. 예를 들어 비동기 파일 업로더를 작성한다고 가정해 보겠습니다. 업로드 속도를 높이는 한 가지 방법은 파일을 별도의 바이트 범위 청크로 읽고 보내는 것입니다. 그러면 서버 구성 요소는 올바른 순서로 파일 콘텐츠를 재구성해야 합니다. 이 API를 사용하면 내가 좋아하는 원시 사용자 파일의 서버 업로드를 피할 수 있습니다. 서버로 사용자 콘텐츠를 수동으로 업로드하기 전에 콘텐츠를 미리 처리할 수도 있습니다. 이것이 사용되는 곳의 예는 smartcrop.js 테스트 베드입니다. 당신이 그들을 가지고 있다면 사용에 대한 다른 아이디어를 공유하시기 바랍니다! 참고: 일부 브라우저는 요소를 네이티브 드롭 대상으로 취급합니다. 이전 예제의 입력 필드로 파일을 드래그해 보십시오.