자바 스 크 립 트 로 컬 파일 읽 기 상용 방법 프로 세 스 분석

웹 프로그램 은 보안 과 프라이버시 때문에 사용자 장치 의 파일 에 직접 접근 할 수 없습니다.하나 이상 의 로 컬 파일 을 읽 으 려 면 input file 과 FileReader 를 사용 하여 이 루어 질 수 있 습 니 다.이 글 에서 우 리 는 몇 가지 예 를 통 해 그것 이 어떻게 일 하 는 지 볼 것 이다.
파일 작업 의 흐름
파일 가 져 오기
브 라 우 저의 JS 가 사용자 의 장치 에서 로 컬 파일 에 접근 할 수 없 기 때문에 사용자 에 게 하나 이상 의 파일 을 선택 할 수 있 는 방법 을 제공 해 야 합 니 다.이것 은 파일 선택 기를 통 해 완성 할 수 있 습 니 다.<input type="file">여러 파일 을 선택 하려 면 multiple 속성 을 추가 할 수 있 습 니 다:<input type="file" multiple>저 희 는 change 이 벤트 를 통 해 파일 의 선택 을 감청 할 수 있 고 다른 UI 요 소 를 추가 하여 사용자 가 선택 한 파일 에 대한 처 리 를 현저하게 시작 할 수 있 습 니 다.
input file 은 files 속성 을 가지 고 있 습 니 다.이 속성 은 File 대상 의 목록 입 니 다.(여러 개의 선택 한 파일 이 있 을 수 있 습 니 다.)

File 대상 은 다음 과 같다.
파일 읽 기
파일 을 읽 을 때 주로[FileReader][1]클래스 를 사용 합 니 다.
"이 대상 이 가 진 속성:"
"FileReader.error":파일 을 읽 을 때 발생 하 는 오 류 를 나타 내 는 DOMException 만 읽 습 니 다.
"FileReader.ready State":FileReader 상 태 를 나타 내 는 숫자 만 읽 습 니 다.값 은 다음 과 같 습 니 다:
상수 이름 설명 EMPTY 0 에 데 이 터 를 불 러 오지 않 았 습 니 다.LOADING 1 데이터 가 불 러 오고 있 습 니 다.DONE 2 모든 읽 기 요청 이 완료 되 었 습 니 다.
"FileReader.result":파일 의 내용 만 읽 습 니 다.이 속성 은 읽 기 작업 이 끝 난 후에 만 유효 합 니 다.데이터 의 형식 은 어떤 방법 으로 읽 기 작업 을 시작 하 느 냐 에 달 려 있 습 니 다.
"이 대상 이 가 진 방법:"
readAsText(file,encoding):일반 텍스트 로 파일 을 읽 고 읽 은 텍스트 는 result 속성 에 저 장 됩 니 다.두 번 째 매개 변 수 는 인 코딩 형식 을 대표 합 니 다.
readAsDataUrl(file):파일 을 읽 고 데이터 URI 형식 으로 result 속성 에 파일 을 저장 합 니 다.
readAsBinary String(file):파일 을 읽 고 result 속성 에 문자열 로 저장 합 니 다.
readAsArray Buffer(file):파일 을 읽 고 파일 내용 을 포함 하 는 Array Buffer 를 result 속성 에 저장 합 니 다.
FileReader.abort():읽 기 동작 을 중단 합 니 다.되 돌 릴 때 ready State 속성 은 DONE 입 니 다.
"파일 을 읽 는 과정 은 비동기 작업 입 니 다.이 과정 에서 progress,error,load 사건 세 가 지 를 제공 합 니 다."
progress:50ms 정도 간격 으로 progress 이벤트 가 발생 합 니 다.
error:파일 정 보 를 읽 을 수 없 는 조건 에서 촉발 합 니 다.
load:성공 적 으로 불 러 오 면 터치 합 니 다.
아래 예제 에서 저 희 는 readAsText 와 readAsDataURL 방법 으로 텍스트 와 이미지 파일 의 내용 을 표시 할 것 입 니 다.
예 1:텍스트 파일 읽 기
파일 내용 을 텍스트 로 표시 하기 위해 서 change 는 다시 써 야 합 니 다.

우선 읽 을 수 있 는 파일 이 있 는 지 확인 해 야 합 니 다.사용자 가 파일 선택 대화 상 자 를 취소 하거나 다른 방식 으로 닫 으 면 파일 을 선택 하지 않 고 읽 거나 종료 할 함수 가 없습니다.
그리고 우 리 는 계속해서 FileReader 를 만 들 었 다.reader 의 작업 은 메 인 스 레 드 와 UI 업 데 이 트 를 막 지 않도록 비동기 적 입 니 다.이것 은 큰 파일(예 를 들 어 동 영상)을 읽 을 때 매우 중요 합 니 다.
reader 에서'load'이벤트(예 를 들 어 Image 대상 과 유사)를 보 내 서 파일 이 읽 혔 음 을 알려 줍 니 다.
reader 는 파일 내용 을 result 속성 에 저장 합 니 다.이 속성의 데 이 터 는 우리 가 사용 하 는 파일 을 읽 는 방법 에 달 려 있 습 니 다.우리 의 예시 에서,우 리 는 readAsText 방법 으로 파일 을 읽 기 때문에,result 는 텍스트 문자열 이 될 것 입 니 다.
예 2:로 컬 에서 선택 한 그림 보이 기
그림 을 표시 하려 면 파일 을 문자열 로 읽 는 것 이 유용 하지 않 습 니 다.FileReader 는 인 코딩 된 문자열 을 읽 을 수 있 는 readAsDataURL 방법 이 있 습 니 다.이 문자열 은요소 의 원본 으로 사용 할 수 있 습 니 다.이 예 의 코드 는 앞의 코드 와 기본적으로 같 습 니 다.차이 점 은 readAsDataURL 로 파일 을 읽 고 결 과 를 그림 으로 표시 하 는 것 입 니 다.
총화
1)자 바스 크 립 트 는 보안 과 프라이버시 때문에 로 컬 파일 에 직접 접근 할 수 없습니다.
2)input 형식 을 file 로 선택 하여 파일 을 처리 할 수 있 습 니 다.
3)file input 은 선택 한 파일 의 files 속성 을 가지 고 있 습 니 다.
4)선택 한 파일 의 내용 에 FileReader 를 사용 할 수 있 습 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.