집 > 기사 > 웹 프론트엔드 > 로컬 파일에 액세스하는 HTML5 메서드 구현

로컬 파일에 액세스하는 HTML5 메서드 구현

不言원래의: 2018-06-12 11:59:586336검색

이 글은 주로 HTML5에서 로컬 파일에 접근하는 방법을 소개합니다. 이는 특정 참조 가치가 있습니다. 이제 여러분과 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

오늘은 간단한 데모 방법을 공유하겠습니다. FileReader를 사용하세요. FileReader는 HTML5에서 제공되는 파일 작업 API입니다. 필요한 친구는 자세히 알아볼 수 있습니다. 이전 기사에서는 드래그 앤 드롭 기능 데모, 페이지 콘텐츠 편집 가능 데모, 로컬 저장 기능 데모를 포함하여 여러 HTML5 예제를 공유했습니다. 오늘은 FileReader 사용법을 보여드리기 위해 간단한 애플리케이션을 공유하겠습니다. FileReader는 HTML5에서 제공하는 파일 작업 API입니다.
앞서 작성한 HTML5 예제를 보시는 동안, 저는 이러한 새로운 HTML5 기능을 좀 더 참신하게 연습하기 위해 간단하면서도 적용 가능한 예제를 만들어볼까 고민하고 있었습니다. 내 목표는 단순히 이러한 HTML 5 API를 보여주는 것이 아니라 예제를 사용하여 개발자에게 실용적이고 혁신적인 방식으로 이러한 API를 실제로 구현하는 방법을 보여주는 것입니다.
HTML5에서는 파일 API를 사용하여 웹페이지에서 로컬 파일 시스템에 액세스하는 것이 매우 간단해졌습니다. 이 파일 사양은 웹 애플리케이션에서 파일 개체를 나타내는 API를 제공하며 이를 선택하고 프로그래밍 방식으로 해당 정보에 액세스할 수 있습니다. 이 파일 API에는 다음이 포함됩니다.
로컬 시스템에서 선택한 개별 파일로 구성된 배열을 나타내는 FileList 시퀀스. 파일 선택을 위한 사용자 인터페이스는 3525558f8f338d4ea90ebf22e5cde2bc을 호출하여 구현할 수 있습니다.
원시 바이너리 데이터를 나타내는 Blob 인터페이스. Blob 객체를 통해 내부의 바이트 데이터에 액세스할 수 있습니다.
파일 이름, 파일 형식, 파일 데이터 액세스를 위한 주소 등 파일의 읽기 전용 속성 정보를 저장하는 파일 인터페이스입니다.
파일을 읽는 방법과 파일 읽기 결과를 얻기 위한 이벤트 모델을 제공하는 FileReader 인터페이스입니다.
본 사양에서 오류 조건을 정의하는 데 사용되는 FileError 인터페이스와 FileException 개체입니다.
예제 사용 방법: 이 예에서는 아트보드를 제공했으며 로컬 파일 시스템에서 아트보드로 이미지를 드래그하거나 파일 선택 상자를 사용하여 이미지를 선택할 수도 있습니다. 예시에서는 이미지 파일만 선택해 주세요. 파일 필터링 및 파일 형식 확인은 추가하지 않았습니다. HTML5를 완벽하게 구현하는 브라우저는 없다는 점을 명심하세요. 이 예제는 Firefox 3.5 이상과 같이 HTML5를 지원하는 브라우저에서 실행되어야 합니다.

파일 API를 구현하는 주요 방법은 다음과 같이 매우 간단합니다:

function imagesSelected(myFiles) { 
for (var i = 0, f; f = myFiles[i]; i++) { 
var imageReader = new FileReader(); 
imageReader.onload = (function(aFile) { 
return function(e) { 
var span = document.createElement(‘span‘); 
span.innerHTML = [&#39;<img class="images" src="&#39;, e.target.result,&#39;" title="&#39;, aFile.name, &#39;"/>&#39;].join(”); 
document.getElementById(‘thumbs’).insertBefore(span, null); 
}; 
})(f); 
imageReader.readAsDataURL(f); 
} 
} 
function dropIt(e) { 
imagesSelected(e.dataTransfer.files); 
e.stopPropagation(); 
e.preventDefault(); 
}

저는 ondrop 이벤트를 b6c5a531a458a2e790c1fd6421739d1c에 배치하기로 선택했습니다:

<td align=”left” height=”105″ ondragenter=”return false” ondragover=”return false” ondrop=”dropIt(event)”> 
<output id=”thumbs”></output> 
</td>

이 예에서는 로컬 파일을 다음으로 드래그했습니다. 아트보드 내부. 하지만 File API의 간단하면서도 강력한 기능을 보여줄 수는 있을 것 같습니다

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 중국사이트!

로컬 파일에 액세스하는 HTML5 메서드 구현

관련 기사