1. 파일 API : (파일 API)
파일 유형 양식 컨트롤에서 선택한 각 파일은 파일 객체이며 FilEList 객체는 선택한 모든 파일을 나타내는 이러한 파일 객체의 수집 목록입니다. 파일 객체는 이진 원시 데이터를 나타내는 Blob 객체에서 상속되고 바이트 내부의 원래 데이터 블록에 액세스하는 슬라이스 방법을 제공합니다. 요컨대, 파일 객체에는 Flielist 객체가 포함되어 있고 파일 객체는 Blob Object에서 상속됩니다!
각 객체의 관련 속성 관계 :
Filereader 인터페이스 :
그림에서 볼 수 있듯이 HTML5는 파일을 메모리로 읽고 파일의 데이터를 읽는 데 사용되는 FilEReader 인터페이스를 제공합니다.
var reader = new Filereader ();
이 인터페이스에는 총 4 가지 방법과 6 개의 이벤트가 있습니다.
• readAsbinaryString (파일) : 파일을 바이너리로 읽습니다
• readAsdataurl (파일) : 파일 DataUrl을 읽습니다
• readastext (file, [encoding]) : 텍스트로 파일을 읽습니다
• 정보 (없음) : 파일 읽기를 인터럽트합니다
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
• onabort : 파일 인터럽트를 읽을 때 트리거되었습니다
• onerror : 파일을 읽을 때 오류가 발생할 때 트리거됩니다.
• onloadStart : 파일이 시작될 때 트리거되었습니다
• OnProgress : 파일을 읽을 때 계속 트리거됩니다
• onload : 파일을 성공적으로 읽을 때 트리거됩니다
• onloadend : 파일 읽기가 끝날 때 트리거 (성공과 실패가 모두 트리거됩니다)
위의 이벤트 매개 변수 e는 e.target.result 또는 this.result가 읽기 결과를 가지고 있습니다!
2. 드래그 앤 드롭 API :
드래그 앤 드롭 속성 : 드래그하고 true로 떨어 뜨려야하는 요소의 드래그 가능한 속성을 설정하십시오 (dragable =”true”)! IMG 요소와 요소를 기본적으로 드래그하고 떨어 뜨릴 수 있습니다.
드래그 앤 드롭 이벤트 : (드래그 앤 드롭 요소 이벤트 및 대상 요소 이벤트에 분할)
요소 이벤트 드래그 앤 드롭 :
• 드래그 스타트 : 드래그하기 전에 트리거되었습니다
• 드래그 전후에 드래그, 연속적으로 트리거를 트리거합니다
• 드래그 엔드 트리거 드래그
대상 요소 이벤트 :
• 드래그 센터, 대상 요소를 입력하여 트리거됩니다
• 대상을 입력하고 대상을 떠나는 사이에 끌어 내려 계속 트리거합니다.
• 드래그 리브, 대상 요소를 트리거합니다
• 드롭, 대상 요소에서 마우스 트리거 해제
하지만! 대상 요소에서는 드래그 및 드롭 이벤트에서 기본 동작을 차단해야합니다 (드래그 및 드롭이 거부 됨). 그렇지 않으면 드래그 및 드롭을 구현할 수 없습니다!
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Datatransfer 객체 : 드래그 앤 드롭 중에 운반 할 데이터를 저장하는 데 특별히 사용됩니다. 드래그 앤 드롭 이벤트의 Datatransfer 속성으로 설정할 수 있습니다.
3 속성 :
• 이펙 홀로 : 커서 스타일을 설정합니다 (없음, 복사, Copylink, CopyMove, Link, Linkmove, Move, Unitialized)
• 효과 획기 : 드래그 앤 드롭 작업의 시각적 효과 설정
• 유형 : 저장된 데이터 유형, 문자열의 의사 소환
• 파일 : 외부 드래그 된 파일 가져 오기, filleList 목록을 반환하고 파일 유형을 반환하는 파일 목록 아래에 유형 속성이 있습니다.
4 방법 :
• setData () : 데이터 키와 값을 설정합니다 (문자열이어야 함)
• getData () : 데이터를 얻고 키 값에 따라 해당 값을 얻습니다.
• ClearData () : Datatransfer 객체에 저장된 데이터를 지우십시오
• setDragimage (imageUrl, log x, long y) : IMG 요소를 사용하여 드래그 앤 드롭 아이콘을 설정하십시오.
//예:
target.addeventListener ( 'dragstart', function (e) {
var fs = e.datatransfer.files; // 드래그 앤 드롭 파일 개체 목록 Flielist 객체
var dt = e.datatransfer; // datatransfer 속성 드래그 앤 드롭 이벤트
dt.effectallowed = 'copy';
dt.setData ( 'text/plain', 'Hello');
dt.setdragimage (Dragicom, -10, -10);
});
3. 업로드 이미지 미리보기 드래그 앤 드롭 :
아이디어 :
1. 파일 드래그 대상 요소의 네 가지 이벤트에 익숙합니다. 참고 : 기본 동작은 OnDragover 및 OnDrop 이벤트에서 차단됩니다.
2. 드래그 및 삭제 후 파일 객체 수집을 받으십시오. e.datatransfer.files
3. 컬렉션의 모든 파일 객체를 루프하고 파일 유형 및 파일 크기를 판단하고 유형이 지정된 경우 해당 작업을 수행하십시오.
4. 파일 정보 객체 읽기 : New Filereader ()는 DataUrl : readAsdataurl (파일 개체)과 같은 파일 개체를 읽는 것과 같은 메소드, 성공적인 읽기 후 트리거 된 이벤트 : onload event 등, this.result는 읽기 데이터입니다.
5. Filereader 객체의 여러 이벤트에서 해당 논리적 처리 수행
HTML :
<div> <p> 이미지 파일을이 영역으로 드래그하십시오! </p> </div>
총 부하 수 : <스팬 id = 'Total'> 100 </span>
JQ :
<script type = "text /javaScript"> $ (function () { / *생각 : *1. 파일 드래그 대상의 대상 요소의 4 가지 이벤트에 익숙해집니다. 참고 : 기본 동작은 ondragover 및 ondrop 이벤트에서 차단됩니다. 지정된 유형*4입니다. 파일 정보 객체를 읽습니다. New Filereader ()는 DataUrl : readasdataurl (파일 객체)과 같은 이벤트가 성공한 후에 트리거됩니다. onload 이벤트 등. Odiv = $ (컨테이너 ". get (0); op.html ( '이 영역으로 드래그! Collection // long.log (fs.length); console.log (fs [i] .size). // var var var var value value reader.readasdataurl (reader.onloadstart = function}; $ ( "#total"). html (e.total) // 읽기가 성공할 때 동결. oimg.attr ( "src", result (odiv). ajax는 파일을 보내서 바이너리 파일을 업로드}}} elere { '이미지 파일을 업로드하십시오!'); </스크립트>생식 이미지 :
요약 : 드래그 앤 드롭 이벤트 API, Datatransfer 객체 및 파일 읽기 객체 FilleList 등에 대한 지식을 결합하여 이미지의 간단한 드래그 및 드롭 업로드의 미리보기 효과를 달성합니다. 객체의 관계와 사용을 알고 구현 아이디어를 명확히해야합니다!
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.