HTML5는 로컬 파일에 액세스하는 예를 구현합니다. _html5 튜토리얼 기술

이전 기사에서는 드래그 앤 드롭 기능 데모, 페이지 콘텐츠 편집 가능 데모 ​​및 로컬 저장 기능 데모를 포함하여 여러 HTML5 예제를 공유했습니다. 오늘은 FileReader 사용법을 보여드리기 위해 간단한 애플리케이션을 공유하겠습니다. FileReader는 HTML5에서 제공하는 파일 작업 API입니다.

앞서 작성한 HTML 5 예제를 보시면서 이러한 새로운 HTML5 기능을 좀 더 참신하게 연습하기 위해 간단하면서도 적용 가능한 예제를 만들어볼까 고민하고 있었습니다. 내 목표는 단순히 이러한 HTML 5 API를 보여주는 것이 아니라 예제를 사용하여 개발자에게 실용적이고 혁신적인 방식으로 이러한 API를 실제로 구현하는 방법을 보여주는 것입니다.

HTML5에서는 File API를 사용하여 웹 페이지에서 로컬 파일 시스템에 액세스하는 것이 매우 간단해졌습니다. 이 파일 사양은 웹 애플리케이션에서 파일 개체를 나타내는 API를 제공하며 이를 선택하고 프로그래밍 방식으로 해당 정보에 액세스할 수 있습니다. 이 File API에는 다음이 포함됩니다.
로컬 시스템에서 선택한 개별 파일로 구성된 배열을 나타내는 FileList 시퀀스입니다. 파일 선택을 위한 사용자 인터페이스는 을 호출하여 구현할 수 있습니다.
Blob 객체를 통해 내부의 바이트 데이터에 접근할 수 있는 Blob 인터페이스입니다.
파일 이름, 파일 형식, 파일 데이터 액세스 주소 등 파일의 읽기 전용 속성 정보를 저장하는 파일 인터페이스입니다.
파일을 읽기 위한 메서드와 파일 읽기 결과를 얻기 위한 이벤트 모델을 제공하는 FileReader 인터페이스입니다.
본 사양에서 오류 조건을 정의하는 데 사용되는 FileError 인터페이스와 FileException 개체입니다.
예제 사용 방법: 이 예에서는 아트보드를 제공했으며 로컬 파일 시스템에서 아트보드로 이미지를 드래그하거나 파일 선택 상자를 사용하여 이미지를 선택할 수도 있습니다. 예시에서는 이미지 파일만 선택해 주세요. 파일 필터링 및 파일 형식 확인은 추가하지 않았습니다. HTML5를 완벽하게 구현하는 브라우저는 없다는 점을 명심하세요. 이 예제는 Firefox 3.5 이상과 같이 HTML5를 지원하는 브라우저에서 실행되어야 합니다.

File API를 구현하는 주요 방법은 아래와 같이 매우 간단합니다:

코드 복사

코드는 다음과 같습니다.

function ImagesSelected(myFiles) {
for (var i = 0, f; f = myFiles[i]; i) {
var imageReader = new FileReader();
imageReader.onload = (function(aFile) {
return function(e) {
varspan = document.createElement('span');
span.innerHTML = [''].join(”)
document.getElementById('thumbs').insertBefore(span, null);
})(f)
imageReader.readAsDataURL(f);
function dropIt(e) {
imagesSelected(e.dataTransfer.files);
e.stopPropagation()
e.preventDefault()}


Place my ondrop event on 를 선택합니다.

코드 복사

코드는 다음과 같습니다. id=”thumbs”> ;

이 예에서는 로컬 파일을 아트보드로 드래그했지만 표시되는 것 같습니다. File API의 강력한 기능이 얼마나 간단한지 알 수 있습니다.