HTML5 파일 업로드 다운로드 인스턴스 코드

HTML5에 제공된 파일 API는 프론트 엔드에 풍부한 응용 프로그램이 있습니다. IE는 IE10 이상의 버전 만 지원하는 것을 제외하고는 모바일 터미널을 포함하여 각 브라우저의 호환성도 좋습니다. 작동 파일의 기능을 더 잘 마스터하려면 먼저 모든 API를 익숙해 져야합니다.

HTML의 입력 [type = file] 레이블에는 여러 속성이있어 사용자가 여러 파일을 선택할 수 있으며 FilEList 객체는 사용자가 선택한 파일 목록을 의미합니다. 이 목록의 각 파일은 파일 객체입니다.

1. 파일 객체의 속성 :
2. 이름 : 파일 이름은 경로가 포함되어 있지 않습니다.
3. 유형 : 파일 유형. 파일 유형 파일은 이미지/로 시작하여 그림의 업로드로 제한 될 수 있습니다.
4. 크기 : 파일 크기. 다른 작업은 파일의 크기에 따라 수행 할 수 있습니다.
5. LastModify : 파일의 최종 수정 시간.

 <입력 유형 = 파일 다중> <cript> var elem = getElementById ( 'files'); 이미지와 파일 크기는 200kb보다 작습니다. if (파일 [i] .type.indexof ( 'image/')! == -1 && files [i] .Size <204800) {console.log (files [i] .name);}}} </script>

입력에는 파일 업로드로 제출할 수있는 파일 유형을 지정하는 데 사용할 수있는 액세스 속성이 있습니다.

accept = image/*는 이미지 형식을 업로드하는 데만 제한 할 수 있습니다. 그러나 WebKit 브라우저에서는 느린 응답에 문제가 있습니다.

해결책은* 패스를 지정된 MIME 유형으로 변경하는 것입니다.

 <입력 유형 = 파일 accept = image/gif, image/jpeg, image/jpg, image/png>

Blob 객체는 이진 데이터를 저장하는 데 사용할 수있는 컨테이너와 같습니다. 크기 속성은 바이트 길이를 나타내고 유형 속성은 MIME 유형을 나타냅니다.

만드는 방법

Blob 객체는 Blob () Construct 함수를 사용하여 만들 수 있습니다.

 var blob = new Blob ([ 'hello'], {type : text/plain});

Blob 생성자의 첫 번째 매개 변수는 Arraybuffer 객체, Arraybufferview 객체, Blob Objects 및 String을 저장할 수있는 배열입니다.

Blob 객체는 Slice () 메소드를 통해 새 Blob 객체를 반환 할 수 있습니다.

 var newblob = blob.slice (0,5, {type : text/plain});

Slice () 메소드는 모든 옵션 인 세 가지 매개 변수를 사용합니다. 첫 번째 파라미터는 Blob Object에서 이진 데이터의 시작 위치를 나타내고, 두 번째 매개 변수는 복제의 끝을 나타내고, 세 번째 매개 변수는 Blob 객체의 마임 유형입니다.

canvas.toblob ()은 블로브 객체를 만들 수도 있습니다. Toblob ()는 세 가지 매개 변수를 사용하고, 첫 번째는 콜백 함수이고, 두 번째는 그림 유형이고, 기본값은 이미지/png이고, 세 번째는 사진 품질, 값은 0과 1 사이입니다.

 var canvas = document.getElementById ( 'canvas');

Blod 객체는 A Tag의 다운로드 속성과 결합하여 다운로드 파일 함수를 달성하기 위해 Window.url 객체를 통해 네트워크 주소를 생성 할 수 있습니다.

예를 들어, 캔버스를 그림 파일로 다운로드하십시오.

 var canvas = document.getElementById ( 'canvas'); contubas.toblob (blob) {// 주소를 생성하려면 형식은 blob : null/fd95b806-db11-4f98-b98-b. var url = url.createobject "blob); var a = document.createElement ( 'a'); a.download = 'canvas'; / 다운로드 후 브라우저 에이 파일을 참조 할 필요가 없습니다.

문자열은 비슷한 방법을 가진 텍스트 파일로 저장할 수도 있습니다.

Filereader 객체는 주로 파일을 메모리로 읽고 파일의 데이터를 읽는 데 사용됩니다. 함수를 구성하여 Filereader 객체를 만듭니다

 var reader = new FilerEreader ();

객체에는 다음 방법이 있습니다.

1. 중단 : 인터럽트 읽기 작업.
2. readAsArrayBuffer : arraybuffer 객체에 파일 내용을 읽으십시오.
3. ReadSbinaryString : 파일을 이진 데이터로 읽습니다.
4. readasdataurl : 파일을 데이터로 읽습니다 : URL 형식.
5. readastext : 파일을 텍스트로 읽습니다.

일반적인 응용 프로그램은 클라이언트에 사진을 업로드 한 후 readasdataurl ()을 통해 그림을 표시하는 것입니다.

 <입력 유형 = 파일 ID = 파일 accept = image/jpeg, image/jpg, image/png> <img src = blank.gif id = preview> <cript> var elem = d ( 'files'), img = document. getElementById ( 'preview'); elem.onchange = function (var files = lem.files = new FilerEreader () {reader.onl oad = function (ev) {img. .src = ev.target.result;} reader.readasdataurl (files [0]);}} </script>

그러나 일부 휴대 전화에서 사진을 찍을 때 사진을 업로드 할 때 버그가 발생하며 삼성 및 아이폰을 포함한 사진이 발견됩니다. 본질 본질 솔루션은 여기서 설명하지 않습니다. 관심이 있으시면 모바일 사진 업로드 및 압축 솔루션.

FilereAder 객체의 readastext ()는 파일의 텍스트를 읽을 수 있으며 블로브 객체의 함수와 결합하여 파일을 다운로드 한 다음 데이터 내보내기 파일이 로컬 영역으로 백업되면 백업 파일을 업로드합니다 입력을 통해 readastext ()를 사용하여 readastext ()를 읽고 텍스트를 읽고 데이터를 복원하십시오.

코드는 위의 기능과 유사합니다

Base64 인코딩을 지원하기 위해 ATOB 및 BTOA 방법이 HTML5에 추가됩니다. 그들의 이름은 또한 매우 간단합니다.

 var a = https : //lin-xin.github.io (a); Iconsole.log (b);

BTOA 메소드는 문자열 a를 인코딩하여 A의 값을 변경하지 않고 인코딩 후 값을 반환합니다.

ATOB 메소드는 인코딩 된 문자열을 디코딩합니다.

그러나 매개 변수의 중국인은 8- 비트 ASCII 인코딩의 문자 범위를 초과했으며 브라우저는 오류를보고합니다. 따라서 먼저 EncodeUricomponent를 인코딩해야합니다.

 var a = var btoa (var c = decodeUricomponent);

위는이 기사의 모든 내용입니다.