blob

코뿔소책, 22.6.1.
기본 지식

<input type='file' accept='image/*' multiple onchange='fileinfo(this.files)'>

	<script>

	function fileinfo(files){

		

		for(var i=0; i<files.length; i++){

			var file = files[i];

			console.log(file.name, file.size, file.type, file.lastModifiedDate);

		}

	}

	</script>

input type='file':type: input 요소의 유형을 규정합니다.file: 파일을 업로드할 입력 필드와'탐색'단추를 정의합니다.
accept='image/*': 파일 업로드를 통해 제출되는 파일의 형식을 지정하고 값은 MIME 형식(http://www.cnblogs.com/zhongcj/archive/2008/11/03/1325293.html);이 속성을 사용하지 마십시오.서버에서 파일 업로드를 검증해야 합니다.
multiple 속성은 입력 필드에서 여러 개의 값을 선택할 수 있도록 규정하고 있으며, 이메일과 파일과 관련이 있습니다.
onchange='fileinfo(this.files)':this는 input 요소 자체를 가리키는데 이this를 어떻게 얻습니까?files는 fileList이고 file 대상의 수조이며 모든 file 대상은blob입니다.
 
file은blob의 구체적인 버전으로blob의 일부 방법을 계승하고 자신의 방법도 있다.
blob는 2진 대대상이고arraybuffer는 2진 버퍼입니다.
 
생성:

  <script>  // 

    var builder = new BolbBuilder();

    builder.append("Hello World!");     // blob

    var blob = builder.getBlob("text/plain");   // blob MIME 

  </script>

// 

var blob = new Blob(["Hello World!"],{type:"text/plain"});  //argu1 blob ；argu2  {type：'mime';endings:'transparent/native( )'}

slice 메서드:

    function sliceBlob(blob, start, end, type) {

      type = type || blob.type;

      if (blob.mozSlice) {

          return blob.mozSlice(start, end, type);

      } else if (blob.webkitSlice) {

          return blob.webkitSlice(start, end, type);

      } else {

          throw new Error("This doesn't work!");

      }

    }

미미 형식이 설정되지 않으면 새 Blob 대상의 미미 형식은 부모와 같습니다.이제 모두 Blob를 지원하고, 슬라이스 방법은 통일되었겠지.
Blob URL
가져오거나 만든blob 작업
url = createObjectURL(blob);
blob://URL브라우저가 메모리에 저장된blob에 대한 간단한 인용;data://URL내용을 인코딩합니다.file://URL로컬 파일 시스템의 파일을 가리킵니다.셋 다 다르다.
그리고 ondragenter와 ondragleave 이벤트;dataTransfer 객체, 드래그, 내려놓기 파일.
 
읽기 blob

　　　　 <input type='file' onchange='readfile(this.files[0])'></input>

	<script src='js/jquery-2.1.1.js'></script>

	<script>

	function readfile(f){   //file, blob

		var reader = new FileReader();   // filereader 

		reader.readAsText(f);

		reader.onload = function(e){    // 

			var text = reader.result;

			console.log(text);			

		}

		reader.onerror = function(e){   // 

			console.log('Error', e);

		}

	}	

	</script>

blob URL은 blob의 내용에 간접적으로 접근하고, FileReader는 blob의 문자에 접근합니다.
FileReader를 사용하려면
1. 인스턴스 만들기: new FileReader (),
2. 등록에 대응하는 이벤트 처리 프로그램:load,error,progress.이 대상은loadstart,loadend,abort 이벤트를 촉발합니다.
3. 읽을blob을 4가지 방법 중 하나로 전송합니다:readAsText (),readAsArrayBuffer (),readAsDataURL (),readAsBinaryString ().즉, 블로그를 4가지 형식으로 바꾸는 것이다.(blob은 Arraybuffer, text는 Int8Array에 해당).readAsText () 에는 두 번째 매개변수 (인코딩 방식) 가 있습니다.
FileReader 객체의 속성:state 및result.이것은 XMLHttpRequest 이벤트의 속성과 방법과 매우 유사합니다.