html5 파일 API를 사용하여 로컬 파일(예: 사진, PDF 등)을 읽는 예

HTML4 시대에 웹페이지에 사용자의 로컬 이미지를 표시하려면 사용자가 먼저 서버에 이미지를 업로드한 다음 서버에서 제공하는 이미지 주소에 따라 이미지를 다운로드해야 합니다. 웹 페이지에 표시됩니다. 이 앞뒤로 이동하는 데에는 이 사진을 저장하기 위해 서버가 소비한 리소스와 사용자가 잘못된 사진을 업로드하는 데 드는 부당한 비용은 말할 것도 없고 이 사진 트래픽의 최소 두 배의 비용이 듭니다(왜냐하면 HTML4 시대에 사용자는 업로드한 후 사진의 파일 이름만 볼 수 있지만 미리보기를 통해 사진이 업로드하려는 사진인지 더 이상 확인할 수 없는 경우가 많습니다.

HTML5는 브라우저만으로 로컬(실제로는 원격일 수도 있음) 파일(주로 그림)을 렌더링하고 읽고 처리할 수 있으며 이 모든 작업은 HTML5 파일 API를 통해 수행됩니다. 성취하다.

첫 번째는 데이터 구조입니다. HTML5는 파일을 나타내는 파일 객체 유형을 정의하며 각 파일 객체는 파일에 해당합니다. 파일 객체에는 이름, 크기, 유형이라는 세 가지 속성이 있습니다. name은 경로가 없는 파일 이름이고, size는 파일 크기(바이트)이며, type은 파일의 MIME(예: image/jpg)입니다.

파일 객체는 단독으로 존재하지 않고 배열 형태로 FileList라는 배열에 존재합니다. 그렇다면 이 FileList 배열을 얻는 방법은 무엇입니까? 현재 HTML5에는 FileList를 가져오는 두 가지 방법이 있습니다. 하나는 파일 형식 입력을 통하는 것이고, 다른 하나는 드래그 앤 드롭 작업의 드롭 이벤트를 통하는 것입니다.

파일 형식 입력을 통해 FileList 가져오기

 <입력 ID=파일-입력 유형=파일 />

또는 다중 파일 선택을 허용하는 HTML5의 새로운 다중 속성:

 <입력 ID=파일-입력 유형=파일 다중 />

일반적으로 사용자가 파일을 선택한 후 파일 읽기와 같은 다음 단계를 즉시 수행할 수 있도록 onchange 이벤트를 input:file에 첨부합니다.

 //네이티브 jsvar inputElement = document.getElementById(file-input);inputElement.addEventListener(change, handlerFiles, false);function handlerFiles() { var fileList = this.files }//jquery version$('#file-input; ').on('change', function() { var fileList = this.files;});

먼저 드래그 앤 드롭할 영역을 설정합니다.

 <div id=dropbox 스타일=너비: 200px;높이: 200px;></div>

또한 drop 이벤트를 트리거하려면 dragenter 및 dragover 이벤트의 기본 동작을 방지해야 합니다.

 var dropbox;dropbox = document.getElementById(dropbox);dropbox.addEventListener(dragenter, dragenter, false);dropbox.addEventListener(dragover, dragover, false);dropbox.addEventListener(drop, drop, false);function dragenter(e) { e.stopPropagation(); e.preventDefault();}함수 dragover(e) { e.stopPropagation(); e.preventDefault();}

그런 다음 드롭 이벤트의 콜백에서 fileList를 가져올 수 있습니다.

 function drop(e) { e.stopPropagation(); e.preventDefault(); var dt = e.dataTransfer; var files = dt.files(files);

HTML5는 FileReader와 ObjectUrl이라는 두 가지 솔루션을 제공합니다.

먼저 FileReader 개체를 인스턴스화해야 합니다.

 var reader = 새로운 FileReader();

FileReader를 사용하여 파일 객체를 읽는 것은 비동기 프로세스입니다. 먼저 FileReader에 대한 로드 이벤트의 콜백을 설정하여 파일 객체의 데이터를 읽은 후 수행해야 하는 추가 작업을 알려야 합니다.

 reader.onload = function(e) { document.getElementById(image).src = e.target.result }

위 코드의 의미는 FileReader가 이미지 데이터를 읽은 후 해당 데이터(DataUrl)를 src 속성에 넣는다는 것입니다.

마지막으로 FileReader의 다양한 메서드를 사용하여 파일 객체 데이터를 읽은 후 저장하는 데 사용할 데이터 형식을 결정하고 읽기를 구현합니다.

1. readAsArrayBuffer(file): 파일 객체를 읽고 이를 ArrayBuffer 객체로 저장합니다(ArrayBuffer 객체가 무엇인지 아직 파악하지 못했습니다. 효율적인 데이터 액세스를 위해 생성된 데이터 구조여야 합니다).
2. readAsText(file [, 'UTF-8']): 일반 텍스트 모드에서 파일 객체를 읽습니다. 두 번째 매개변수(선택 사항)를 사용하여 문자 인코딩을 지정할 수 있다는 점은 주목할 가치가 있습니다.
3. readAsDataURL(file): 파일 객체를 읽고 data: URL 형식의 문자열로 저장합니다.

ObjectURL은 파일의 임시 경로와 동일합니다. 이 임시 경로는 언제든지 생성되고 해제될 수 있으며 로컬 브라우저에서 사용될 경우 일반 URL과 다르지 않습니다.

예를 들어 페이지에 로컬 이미지를 표시하는 경우:

 var img = document.createElement(img);img.src = window.URL.createObjectURL(file);

이때 src는 다음과 같습니다: blob:http://test.local.com/e03e8bbf-66ce-4fea-a8c8-772f9fdb4d40

이 src를 사용하면 브라우저가 로컬에서 이미지를 읽을 수 있습니다.

FileReader를 사용하여 이미지의 base64 인코딩을 생성하고 이를 src에 넣는 것과 비교하면 이 솔루션의 성능이 크게 향상되었습니다.

File 객체를 읽는 두 가지 솔루션을 비교해 보면, FileReader는 파일을 업로드하는 데 적합한 반면 ObjectURL은 브라우저에서 직접 작업한 다음 캔버스를 사용하여 스크린샷을 찍거나 이미지 압축을 수행하는 등 작업 후 처리된 데이터를 업로드하는 데 적합합니다. . 물론 이것은 모두 호환성에 달려 있습니다.

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.