HTML5는 로컬 파일에 액세스하는 인스턴스를 구현합니다

댓글 : 오늘은 Filereader 사용 방법을 보여주는 간단한 응용 프로그램을 공유하겠습니다. Filereader는 HTML5에서 제공되는 파일 작업 API입니다. 필요한 친구들은 그것에 대해 배울 수 있습니다.

이전에 쓴 HTML 5 예를 살펴보면이 새로운 HTML5 기능을 훨씬 더 기괴한 방식으로 드릴 수있는 간단하지만 적용 가능한 예제를 작성하려고 생각합니다. 저의 목표는 단순히 이러한 HTML 5 API를 보여주는 것이 아니라 예제를 사용하여 개발자에게 실용적이고 혁신적인 방식으로 이러한 API를 진정으로 구현하는 방법을 알려주는 것입니다.

HTML5에서는 웹 페이지에서 로컬 파일 시스템에 액세스하는 것이 매우 간단 해져서 파일 API를 사용합니다. 이 파일 사양은 웹 응용 프로그램에서 파일 개체를 나타 내기위한 API를 제공합니다. 프로그래밍을 통해이를 선택하고 정보에 액세스 할 수 있습니다. 이 파일 API에는 다음이 포함됩니다.

FilleList 시퀀스는 로컬 시스템에서 선택한 개별 파일 배열을 나타냅니다. 파일을 선택하는 데 사용되는 사용자 인터페이스는 <input type = file> call을 통해 구현할 수 있습니다.

원래 바이너리 데이터를 나타내는 Blob 인터페이스는 내부의 바이트 데이터에 액세스 할 수 있습니다.

파일 인터페이스에는 파일 이름, 파일 유형 및 파일 데이터 액세스 주소와 같은 파일의 읽기 전용 속성 정보가 포함됩니다.

파일을 읽는 메소드와 파일의 결과를 읽는 이벤트 모델을 제공하는 Filereader 인터페이스.

이 사양에서 오류 생성 조건을 정의하는 FileError 인터페이스 및 FileException 객체.

이 예를 사용하는 방법 :이 예에서는 로컬 파일 시스템에서 이미지를 드래그 앤 드롭거나 파일 선택 상자를 사용하여 이미지를 선택할 수있는 아트 보드를주었습니다. 이 예에서는 이미지 파일 만 선택하십시오. 파일 필터링 및 파일 유형 확인을 추가하지 않았습니다. 브라우저는 HTML5를 완전히 구현하지 않습니다. 이 예제는 Firefox 3.5 이상과 같은 HTML5를 지원하는 브라우저에서 실행해야합니다.

파일 API를 구현하는 주요 방법은 다음과 마찬가지로 매우 간단합니다.

함수 imagesselected (myfiles) {

for (var i = 0, f; f = myFiles [i]; i ++) {

var imageReader = new Filereader ();

imageReader.onload = (function (afile) {

반환 함수 (e) {

var span = document.createelement ( 'span');

span.innerhtml = [ '<img src = "', e.target.result, '"/>']. join ();

document.getElementById ( 'Thumbs') .InsertBefore (span, null);

};

})(에프);

imageReader.ReadAsDataurl (F);

}

}

함수 dropit (e) {

imagesselected (e.datatransfer.files);

E.StopPropagation ();

e.preventDefault ();

}

<td>에 ondrop 이벤트를 배치하기로 결정했습니다.

<td elign = 왼쪽 높이 = 105 ″ ondragenter = return false ondragover = return false ondrop = dropit (event)>

<output id = thumbs> </output>

</td>

이 예에서는 로컬 파일을 아트 보드로 드래그합니다. 그러나 파일 API의 간단하지만 강력한 기능을 보여줄 수 있다고 생각합니다.