HTML5 파일 드래그, 드롭, 분석, 읽기 및 업로드

바쁜 한 주였습니다. 새로운 HTML5 API가 사용자가 드래그하여 브라우저 창으로 드롭 한 파일을 열고 읽고 업로드하는 데 도움이되는 방법을 발견했습니다. 이 기사는 기술과 현재 수준의 브라우저 지원을 요약합니다. 키 테이크 아웃

html5 API는 사용자가 드래그하여 브라우저 창으로 드롭 한 파일을 열고 읽고 업로드하는 데 도움이 될 수 있습니다. 이 기능은 최신 버전의 Chrome, Firefox 및 Opera에서 지원하지만 Opera는 표준 파일 입력을 통해서만 사용할 수 있습니다. html5 filelist 객체는 파일 개체의 배열과 같은 모음이며, Filereader 객체를 사용하면 javaScript에서 텍스트 또는 이진 파일을 열 수 있습니다. 이렇게하면 추가 처리 또는 업로드가 발생하기 전에 파일 유형과 크기를 확인할 수 있습니다.

html5를 사용하면 xmlhttprequest2 객체에 "진행 상황"이벤트를 첨부하여 업로드 진행 막대를 생성 할 수 있습니다. 이 기능은 파일을 드래그 앤 드롭하는 기능과 결합하여 웹 응용 프로그램의 유용성을 크게 향상시킬 수 있습니다.

html5 API 지원
• JavaScript 코드는 이벤트 핸들러를 첨부하기 전에 파일, FilEList 및 FilEReader 객체의 존재를 확인해야합니다. 글을 쓰는 시점에서 이들은 최신 버전의 Chrome, Firefox 및 Opera에서 지원합니다.
Opera는 이러한 객체를 지원하지만 드래그 앤 드롭이 아닌 표준 파일 입력을 통해서만 사용할 수 있습니다. 따라서 추가 점검이 필요합니다. XMLHTTPREQUEST2 업로드 방법을 사용하는 것이 좋습니다 (예 :
• 파일 드래그 앤 드롭 모든 브라우저 (iPhone 및 iPad의 브라우저 제외)는 친숙한 "브라우즈"버튼을 표시하는 파일 입력 유형을 지원합니다. "다중"속성이 HTML5에 도입되었으며 변경 이벤트 핸들러를 현장에 첨부 할 수 있습니다.
Chrome 및 Firefox를 사용하면 사용자가 하나 이상의 파일을 선택한 요소로 끌 수 있습니다. 삭제 된 파일을 감지하기 위해 "Dragover"및 "Dragleave"(스타일 변경) 및 "Drop"을 포함한 이벤트 핸들러를 첨부 할 수 있습니다 (예 :
• filleList 객체를 검색 html5 filelist 객체는 배열과 같은 파일 개체 모음입니다. 파일 입력 필드 파일 속성 (event.target.files)을 통해 filleList를 반환합니다. 삭제 된 파일은 이벤트의 datatransfer.files 속성 (event.datatransfer.files)을 통해 filelist 객체를 반환합니다. 따라서 단일 이벤트 핸들러를 사용하여 FilEList 객체를 검색 할 수 있습니다.
기본 이벤트를 취소하는 것이 중요합니다. 이렇게하면 브라우저가 창에 떨어질 때 파일을 표시하거나 처리하려고 시도하지 않습니다. 파일 객체 분석 FilleList 컬렉션에는 여러 파일 개체가 포함되어 있습니다. 3 가지 유용한 파일 속성이 제공됩니다.

<: :> .name : 파일 이름 (경로 정보가 포함되어 있지 않음)

.type : 마임 유형 (예 : 이미지/jpeg, 텍스트/일반 등 <:> .Size : 파일 크기의 바이트. 추가 처리 또는 업로드가 발생하기 전에 파일 유형과 크기를 확인할 수 있습니다 (예 :

if (window.File && window.FileList && window.FileReader) { ... }

자세한 내용은 HTML5 및 JavaScript를 사용하여 삭제 된 파일을 열는 방법을 참조하십시오. filereader 를 사용하여 파일 열기 html5 filereader 객체를 사용하면 JavaScript로 텍스트 또는 이진 파일을 열 수 있습니다. 예상대로 readastext () 메소드는 텍스트 내용을 검색하는 데 사용됩니다 (예 :

마찬가지로, readasdataurl () 메소드는 이진 이미지 데이터를 인코딩 된 데이터 URL로 검색하여 이미지 SRC 속성 또는 캔버스 요소로 전달할 수 있습니다.

자세한 내용은 HTML5 및 JavaScript를 사용하여 삭제 된 파일을 열는 방법을 참조하십시오. ajax를 사용하여 파일을 업로드합니다 사용자가 페이지에 남아있는 동안 적절한 파일을 서버에 업로드 할 수 있습니다. xmlhttprequest2의 send () 메소드에 파일 개체를 전달하는 문제입니다.

var xhr = new XMLHttpRequest();
if (xhr.upload) {
	... attach drag and drop events ...
}

또한 파일 이름을 HTTP 헤더로 보냈습니다. 이것은 선택 사항이지만 PHP와 같은 언어를 사용하여 서버에서 원래 이름을 사용하여 파일을 재현 할 수 있습니다.

document.getElementById("fileselect").addEventListener("change", FileSelectHandler, false);

자세한 내용은 html5 및 ajax를 사용하여 파일을 비동기로 업로드하는 방법을 참조하십시오. 업로드 진행률 표시 줄 만들기 또한 "진행"이벤트를 xmlhttprequest2 객체에 첨부 할 수 있습니다.

핸들러는 .loaded (전송 된 바이트 수) 및 .total (파일 크기) 속성이있는 이벤트 객체를 수신합니다. 따라서 진행 상황을 계산하여 HTML5 진행 태그 또는 기타 요소로 전달할 수 있습니다 (예 :

자세한 내용은 HTML5 및 JavaScript에서 그래픽 파일 업로드 진행률 표시 줄을 만드는 방법을 참조하십시오. 이 시리즈를 즐겼기를 바랍니다. 파일 드래그 앤 드롭은 웹 애플리케이션 유용성을 변화시킬 수있는 중요한 기능입니다. html5는 마침내 쉽게 만듭니다. html5 파일에 대한 자주 묻는 질문 (FAQ) 내 웹 애플리케이션에서 HTML5 드래그 앤 드롭 기능을 구현하려면 어떻게해야합니까?

document.getElementById("filedrag").addEventListener("drop", FileSelectHandler, false);

// cancel event default
e.preventDefault();

// fetch FileList object
var files = e.target.files || e.dataTransfer.files;

// process all File objects
for (var i = 0, file; file = files[i]; i++) {
	...
}

HTML5 드래그 앤 드롭 기능을 구현하려면 몇 단계가 포함됩니다. 먼저, 사용자가 파일을 삭제할 수있는 영역 인 드롭 존을 만들어야합니다. 이것은 HTML 요소 일 수 있지만 'Draggable'속성이 True로 설정되어 있어야합니다. 다음으로‘드래그 오버’및‘드롭’이벤트에 대한 이벤트 리스너를 추가해야합니다. ‘드래그 오버’이벤트는 드래그 된 항목이 드롭 존에 걸쳐서 해고되고 항목이 떨어지면‘드롭’이벤트가 해고됩니다. 'Drop'이벤트의 이벤트 핸들러에서는 이벤트 객체의 'Datatransfer.files'속성을 통해 삭제 된 파일에 액세스 할 수 있습니다.‘datatransfer.files’와‘datatransfer.items’의 차이점은 무엇입니까?

‘datatransfer.files’및‘datatransfer.items’는 드래그 앤 드롭 이벤트와 관련된‘datatransfer’객체의 속성입니다. ‘Datatransfer.Files’속성은 파일을 드래그하는 파일을 나타내는 filelist 객체입니다. 서버 측에서 삭제 된 파일을 처리하려는 경우 유용합니다. 반면, 'datatransfer.items'는 모든 드래그 데이터를 나타내는 DatatransferitemList 객체입니다. 파일뿐만 아니라 다른 유형의 드래그 데이터를 처리하려는 경우 유용합니다.

‘DROP’이벤트가 해고 될 때‘DATATRANSFER.FILES’가 비어있는 이유는 무엇입니까? 'DATATRANSFER.FILES.FILE'가‘드롭’이벤트가 해고 될 때 비워지면 'DRACOVER'이벤트 핸들러에서 액세스하려고 할 수 있습니다. ‘Datatransfer.Files’속성은‘드롭’이벤트에서만 채워져 있습니다. 올바른 이벤트 핸들러에서 액세스하고 있는지 확인하십시오.

삭제 된 파일의 내용을 어떻게 읽을 수 있습니까?

Filereader API를 사용하여 삭제 된 파일의 내용을 읽을 수 있습니다. 먼저 새 Filereader 객체를 만들어야합니다. 그런 다음 'readastext'또는 'readasdataurl'메소드를 사용하여 파일 내용을 읽을 수 있습니다. 'readastext'메소드는 파일을 텍스트 문자열로 읽고 'readasdataurl'메소드는 파일을 데이터 URL로 읽습니다.

파일이 업로드되는 동안 진행률 표시 줄을 표시하는 방법

XMLHTTPREQUEST 개체의 '진행 상황'이벤트를 들으면 진행률 표시 줄을 표시 할 수 있습니다. 업로드가 진행됨에 따라 '진행'이벤트가 주기적으로 발사됩니다. 이벤트 처리기에서 진행률 백분율을 계산하고 그에 따라 진행률 표시 줄을 업데이트 할 수 있습니다. XMLHTTPREQUEST 객체의 '업로드'속성을 '진행'이벤트를 활성화하려면 TRUE로 설정하십시오.

여러 파일 업로드를 어떻게 처리 할 수 ​​있습니까?

‘DataTransfer.files’속성을 반복하여 여러 파일 업로드를 처리 할 수 ​​있습니다. FilElist 객체의 각 항목은 삭제 된 파일을 나타내는 파일 객체입니다. 예를 들어 내용을 읽거나 서버에 업로드하여 각 파일을 개별적으로 처리 할 수 ​​있습니다.

삭제할 수있는 파일 유형을 제한하는 방법

'DataTransfer.files'속성에서 파일 객체의 '유형'속성을 확인하여 삭제할 수있는 파일 유형을 제한 할 수 있습니다. '유형'속성은 파일의 마임 유형을 나타내는 문자열입니다. 파일 유형이 허용되지 않으면 'Drop'이벤트 핸들러에서 이벤트 객체의 '예방 대상'메소드를 호출하여 드롭 조치를 방지 할 수 있습니다. 중첩 된 요소에 대한 드래그 앤 드롭 이벤트를 어떻게 처리 할 수 ​​있습니까?

중첩 요소에 대한 드래그 앤 드롭 이벤트 처리 이벤트가 DOM 트리를 기포하기 때문에 까다로울 수 있습니다. 부모 요소가 어린이 요소에 대한 드래그 앤 드롭 이벤트를받지 못하도록하려면 Child Element의 이벤트 핸들러에서 이벤트 객체의 '스톱 포거레이션'메소드를 호출 할 수 있습니다.

파일이 드롭 영역의 모양을 사용자 정의하는 방법은 어떻게 파일이 드래그 영역을 끌고있는 동안 드롭 존의 모양을 사용자 정의 할 수 있습니까?

당신은 '드래그에 등장하는 등의 등장을 사용자 정의 할 수 있습니다. ‘드래그 리브’및‘드롭’이벤트 처리기. CSS에서 클래스의 모양을 정의 할 수 있습니다.

자동화 된 테스트에서 드래그 앤 드롭 기능을 테스트하려면 어떻게해야합니까?

드래그 및 드롭 기능을 테스트하면 복잡한 사용자 상호 작용이 필요할 수 있습니다. 그러나 셀레늄과 같은 일부 테스트 라이브러리는 드래그 앤 드롭 동작을 시뮬레이션하는 방법을 제공합니다. 모의‘드롭’이벤트를 만들어 드롭 존 요소로 파견 할 수도 있습니다.

위 내용은 HTML5 파일 드래그, 드롭, 분석, 읽기 및 업로드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!