파일을 로드하는 가장 간단한 방법은 표준 요소를 사용하는 것입니다. 자바 스크립트는 파일 목록으로 선택한 파일 개체의 목록을 반환합니다. 다음은 `다중` 특성을 사용하여 한 번에 여러 파일을 선택할 수 있도록 하는 예제입니다. 여러분의 예는 여러분이 시연하고 있는 기술에 방해가 되지 않을 만큼 간단했지만, 유용하지 않을 정도로 간단하지는 않았습니다. 자세한 내용 및 예제는 웹 응용 프로그램의 파일 사용을 참조하십시오. 이제 FileReader API의 작동 방식을 이해하면 몇 가지 예제를 살펴보겠습니다. 경우에 따라 전체 파일을 메모리로 읽는 것이 최선의 선택이 아닙니다. 예를 들어 비동기 파일 업로더를 작성한다고 가정해 보겠습니다. 업로드 속도를 높이는 한 가지 방법은 파일을 별도의 바이트 범위 청크로 읽고 보내는 것입니다. 그러면 서버 구성 요소는 올바른 순서로 파일 콘텐츠를 재구성해야 합니다. 참고: 일부 브라우저는 요소를 네이티브 드롭 대상으로 취급합니다. 이전 예제의 입력 필드로 파일을 드래그해 보십시오.

파일을 로드하는 또 다른 방법은 바탕 화면에서 브라우저로 기본 드래그 앤 드롭하는 것입니다. 이전 예제를 약간 수정하여 끌어서 놓기 지원을 포함할 수 있습니다. 아래 예제에서는 읽기 상태를 모니터링하는 진행률 표시줄을 표시합니다. 진행률 표시기를 확인하려면 원격 드라이브에서 큰 파일 또는 하나를 시도하십시오. HTML5는 마지막으로 파일 API 사양을 통해 로컬 파일과 상호 작용하는 표준 방법을 제공합니다. 해당 기능의 예로 File API를 사용하여 이미지가 서버로 전송될 때 미리 보기로 만들거나 사용자가 오프라인 상태에서 앱에서 파일 참조를 저장할 수 있습니다. 또한 클라이언트 측 논리를 사용하여 업로드의 mimetype이 파일 확장명과 일치하는지 확인하거나 업로드 크기를 제한할 수 있습니다. 다음 예제에서는 파일의 청크 읽기를 보여 줍니다. 주목할 만한 점은 온로드 엔드를 사용하고 onload 이벤트를 사용하는 대신 evt.target.readyState를 검사한다는 것입니다. 가장 널리 사용되는 이벤트는 확실히 로드 및 오류입니다. 둘째, 더 자주 우리는 또는 drag`n`drop 또는 기타 브라우저 인터페이스에서 파일을 가져옵니다. 이 경우 파일은 OS에서 이 정보를 가져옵니다.

읽기가 완료되면 결과에 액세스 할 수 있습니다 : 선택 파일 버튼없이 직접 local .txt 파일을 읽으려면 어떻게해야합니까? 사용자의 파일 시스템에 직접 액세스할 수 없습니다.