html5 파일 인터페이스는 파일을 사용하여 웹 페이지에서 다운로드합니다.

파일 인터페이스는 파일과 관련된 정보를 제공하고 웹 페이지에서 JavaScript를 실행하여 파일의 내용에 액세스합니다.

파일 객체는 드래그 앤 드롭 작업의 DataTransfer 객체에서 입력 태그가있는 파일을 선택하기 위해 사용자가 반환 한 FilEList 객체에서 나옵니다. 파일 객체는 Blob에서 사용할 수있는 모든 컨텍스트에서 사용할 수있는 특수 블로브입니다.

웹 페이지에서 파일을 사용하려면 일반적으로 관련되어야하는 객체는 다음과 같습니다. 파일 객체, filelist 객체, filereader 객체.

FilleList는 입력 요소의 파일 속성과 드래그 앤 드롭 API (파일이 드래그 될 때 이벤트 .Datatransfer.Files)에서 나옵니다.

 <입력 ID = FileItem 유형 = file> var filelist = getElementById ( 'FileItem')

길이 :이 속성은 filelist 객체에 포함 된 파일 객체의 길이 만 반환합니다.

항목 (인덱스) : FilElist 객체의 지정된 위치에 지정된 파일 객체를 가져옵니다. 여러 배열 인덱스 형태로 브리핑 할 수 있습니다.

각 fillelist 객체는 파일 객체입니다. 파일 객체는 특별한 블로브입니다.

1. LastModify : 파일이 개정되는 시간, 이번 시간은 1970 년 1 월 1 일 0 : 0 : 00에 통과 된 밀리 초입니다. 읽을 수있는 속성입니다

2. 이름 : 파일 객체에서 참조 된 파일의 파일 이름은 읽기 쉬운 속성입니다.

3. 유형 : 파일 객체에서 참조 된 파일의 파일 유형은 Mine 유형이며, 이는 읽을 수있는 속성입니다.

4.size : 파일 객체에서 참조 된 파일의 파일 크기,이 하나는 읽기 속성입니다.

파일 객체를 단독으로 정의하는 방법은 없지만 Blob 객체에서 상속하는 방법이 있습니다.

FilereAder 객체를 사용하면 웹 응용 프로그램이 사용자 컴퓨터에서 파일을 비동기로 읽을 수 있습니다.

Filereader ()는이를 통해 새 FilereAder 객체를 생성 할 수있는 생성자입니다.

var filereader = new Filereader ();

1.Error : 읽기 과정에서 발생하는 오류를 반환합니다.

2. Result : 파일의 내용을 반환하면 유형은 타이핑하거나 Arraybuffer에 적합합니다. 이 속성은 작업을 읽은 후에 만 ​​합법적입니다.

3. ReadyState : 가능한 값은 0입니다. 아직 읽지 않았습니다. 1 : 읽기, 읽기가 완료되었습니다.

1.Abort () : 인터럽트 읽기 작업. ReadyState의 가치는 2가됩니다.

2. readasarraybuffer (blob) : 파일 객체 (파일 개체는 특수 블로브)와 같은 지정된 블로브를 읽으십시오. 읽기가 완료되는 한 ReadyState 속성의 값은 2가되고 결과 속성은 파일 데이터를 나타내는 ArrayBuffer입니다.

3. readasdataurl (blob) : 파일 객체 (특별한 블로브)와 같은 지정된 블로브를 읽으십시오. 읽기가 완료되는 한 ReadyState 속성의 값은 2가됩니다. 결과 속성은 파일 데이터를 나타내는 URL이고 데이터 형식은 Base64- 인코딩 된 문자열입니다.

 <입력 유형 = 파일 onchange = previewFile ()> <br> <img src = height = 200 var preview = document.queerySelector ( 'IMG'); 파일 [0]; var var = new FilerEreader (); addeventListener () {preview.src = reader.result;}, if (file) {dataurl (file);}}

4. readastext (boob, Encoding) : 파일 객체 (파일 개체는 특수 블로브)와 같은 지정된 블로브를 읽습니다. 읽은 한 ReadyState 속성의 값은 2가되고 결과 속성은 파일 데이터를 나타내는 텍스트 문자열입니다. 두 번째 매개 변수는 선택 사항입니다. 결과 속성의 중국어 텍스트 문자열의 인코딩 메소드를 지정하는 데 사용됩니다.

1. 아버트 : 읽기 작업시 종료.

2. 오류 : 작업 중 작업 중에 작업을 읽을 때 트리거되었습니다.

3.로드 : 작업을 성공적으로 읽을 때 트리거되었습니다.

4.로드 : 읽기 작업이 끝날 때 트리거되었습니다. 성공이나 실패를 읽을 수 없습니다.

5.로드 스타트 ​​: 읽기 작업 시작시 트리거되었습니다.

6. 프로세스 : 읽기 과정에서 트리거되었습니다.

HTML5의 파일 개체를 사용하여 선택한 로컬 파일에 액세스 하고이 파일의 내용을 읽을 수 있습니다. 파일 객체는 입력 요소 또는 드래그 앤 드롭 인터페이스에서 나온 것입니다.

 <입력 유형 = 파일 ID = 입력>

입력을 통해 선택된 파일에 액세스합니다

 var selectfile = document.getElementById ( '입력');

한 번에 한 번에 하나의 파일 만 선택할 수 있습니다. 한 번에 여러 파일을 선택하면 입력 요소에 여러 속성을 추가하고 여러 속성을 내 TRUE로 설정해야합니다. Gecko 1.9.2 전에 한 번에 여러 파일을 선택하십시오.

드래그 앤 드롭 인터페이스의 경우 HTML5 드레지 벤트를 볼 수 있습니다.

1 단계 : 배치 영역을 만듭니다. div, p 등과 같은 일반적인 요소

2 단계 : Drop, Dragenter, Dragover 이벤트 처리 프로그램을 배치 영역에 추가하십시오. 주요 역할은 Drop Event Processing Program입니다.

아래는 짧은 드로잉 다이어그램의 예입니다.

 <div id = 'dropbox'class = 'dropbox'> .Dropbox {solid 3px 빨간색;

 dropbox = dropbox.getElementListener (DRACENTER, DRACENTER, DROPBOX); (e.StopPropagation (); ); i] var image inmains ///; );

위는 Xiaobian이 소개하여 웹 페이지에서 파일을 다운로드하는 데 도움이되기를 바랍니다. VEVB WULIN 웹 사이트를 지원해 주셔서 대단히 감사합니다!