詳細は、Blob、File、FileReader、ArrayBuffer、ArrayBufferView、DataURL、URLオブジェクト

ここでは、HTML 5のいくつかのオブジェクトについて詳しく説明します.Blob、File、FileReader、ArrayBuffer、ArrayBufferView、DataURL、URL
一.Blob
Blobオブジェクトは、読み取り専用の元のデータを含むクラスファイルオブジェクトです.Blobオブジェクトのデータは必ずしもJavaScriptのオリジナル形式である必要はありません.FileインタフェースはBlobに基づいて、Blobの機能を継承し、ユーザーコンピュータ上のローカルファイルを拡張してサポートします.
Blobオブジェクトはバイナリデータを格納するコンテナと見なすことができるが、中のバイナリデータを読み取るにはFileReaderが必要である.また、BlobでバイナリデータのMIMEタイプを設定することもできます.

/**
* Blob    ：
* dataArray：  ，       Blob      ，     Int32Array、Uint8Array、Float32Array ，         ArrayBuffer，ArrayBufferView， Blob，   DOMString  。
* opt：  ，    Blob     （ ：MIME  ）
**/
var blob = new Blob(dataArr:Array, opt:{type:string});

DOMStringオブジェクトを装填Blobオブジェクト

を作成する.

var s = '
hello
'
var blobObj = new Blob([s], {type: 'text/xml'})

ArrayBufferオブジェクトを埋め込むBlobオブジェクト

を作成する

var abf = new ArrayBuffer(8)
var blobOjb = new Blob([abf], {type: 'text/plain'})

Blob.slice()このメソッドは、元のBlobオブジェクトの指定範囲内のデータを含む新しいBlobオブジェクトを返します.このリリースにより、大きなファイルのスライスアップロード

を実現できます.

/**
* start：    ，   0
* end：      （   end）
* contentType： Blob MIME  ，       
**/
Blob.slice(start:number, end:number, contentType:string)

Canvas.toBlob()canvasがblobオブジェクト

に移行

urlダウンロードファイルwindowを実現する.URLオブジェクトはBlobオブジェクトに対して1つのネットワークアドレスを生成することができて、aラベルのdownload属性を結合して、urlをクリックしてファイル

をダウンロードすることができます

function createDownload(fileName, content){
    var blob = new Blob([content]);
    var link = document.createElement("a");
    link.download = fileName;
    link.href = URL.createObjectURL(blob); //      image src       
    link.click()
}

二.File
FileはBlobのサブクラスで、blobより主に1つのnameの属性が多い.
私たちがよく使うファイル選択ラベル要素にはfiles属性があります.このfilesがFileタイプです.

var input = document.querySelector('input[type=file]');
console.log(input.files) // FileList {0: File(3044232), length: 1}

三.URL
base 64文字列をコンテンツのDataURIとして使用して、あるファイルを別のドキュメントに埋め込むことができるほか、URLオブジェクトを使用することもできます.URLオブジェクトは、FileオブジェクトまたはBlobオブジェクトへのURLを生成するために使用されます.
静的メソッド:

URL.createObjectURL()このメソッドは、パラメータに与えられたオブジェクトを表すURLを含むDOMStringを作成します.このURLのライフサイクルと作成ウィンドウのdocumentバインド.この新しいURLオブジェクトは、指定されたFileオブジェクトまたはBlobオブジェクトを表します.

var objectURL = URL.createObjectURL(blob);

blobは、URLを作成するためのFileオブジェクトまたはBlobオブジェクトです.

URL.revokeObjectURL()この方法は、以前に呼び出すURLを解放するために使用される.createObjectURL()で作成された既存のURLオブジェクト.URLオブジェクトの使用を終了すると、このメソッドを呼び出すことで、ブラウザにこのファイルの参照を維持する必要がなくなったことを知らせる必要があります.

window.URL.revokeObjectURL(objectURL);

objectURLは、URLが呼び出されることを示すDOMStringである.createObjectURL()メソッドによって生成されるURLオブジェクト
四.FileReader
Blobオブジェクトはバイナリデータのコンテナにすぎず、それ自体がバイナリを操作できないことを知っています.FileReaderオブジェクトはバイナリデータを専門に操作しています.FileReaderは主にファイルの内容をメモリに読み込むために使用され、一連の インタフェースを通じて、メインスレッドでローカルファイルにアクセスできます.
インスタンスを作成するには

var reader = new FileReader();

メソッド(パラメータはFileまたはBlobのオブジェクト)

reader.abort()ファイル読み出し動作を終了する

reader.readAsArrayBuffer(file)は非同期でファイルの内容をバイト単位で読み出し、結果はArrayBufferオブジェクトで

を表す.

reader.readAsBinaryString(file)は、ファイルの内容をバイト単位で非同期に読み出す、結果としてファイルのバイナリ列readerとなる.readAsDataURL(file)はファイルの内容を非同期で読み出し、結果はdata:url(すなわちBase 64形式)の文字列形式で

を表す.

reader.readAsText(file,encoding)は非同期に文字でファイルの内容を読み出し、結果は文字列形式で

を表す.
イベント名

onabort読み出し動作が中止すると

が呼び出される.

onerror読み出し動作にエラーが発生すると

が呼び出される.

onload読み出し動作が正常に完了すると

が呼び出される.

onloadend読み取り操作が完了すると呼び出され、成功または失敗にかかわらず

.

onloadstart読み出し操作が開始する前に

を呼び出す.

onprogressは、データの読み出し中に

を周期的に呼び出す.
実際のシーンでのいくつかの応用

は、バックグラウンド

を経由することなく、画像をアップロードして直接表示します.

var input  = document.getElementById("file"); //input file
input.onchange = function(){
    var file = this.files[0];
    if(!!file){
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(){
            //         
           document.getElementById("file_img").src = reader.result //       
           console.log(reader.result);
        }
    }
}

ピクチャ転送バイナリBlob ， ArrayBuffer Blob ， )

input.addEventListener('change', function() {
  var file = this.files[0],
      fr = new FileReader(),
      blob;
  fr.onload = function() {
      blob = new Blob([this.result]);
      var formdata = new FormData()
      formdata.append('file', blob)
  };
  fr.readAsArrayBuffer(file)
});

ピクチャImage回転Base 64

function getImgToBase64(url,callback){
    var canvas = document.createElement('canvas')
    var ctx = canvas.getContext('2d')
    var img = new Image
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img,0,0);
        var dataURL = canvas.toDataURL('image/png'); //base64  
        callback(dataURL);
        canvas = null;
    };
    img.src = url;
}

Base 64は、Blob、File

に移行する.

function base64ToBlob(base64){
    var arr = base64.split(',')
    var mime = arr[0].match(/:(.*?);/)[1]
    var bytes = atob(arr[1])      //  base64             
    var n = bytes.length
    var u8arr = new Uint8Array(n)
    while(n--){
        u8arr[n]=bytes.charCodeAt(n);   //      Unicode  
    }
    return new Blob([u8arr], {type: mime})
    //or: return new File(u8arr], {type:mime})  //base64     

   //         ：
    var formdata = new FormData()
    formdata.append('file', new Blob([u8arr], {type: mime}))
    xhr.send(formdata)
}

作者:Polaris_llhリンク:https://www.jianshu.com/p/67702e025ede出典:簡書簡書の著作権は著者の所有であり、いかなる形式の転載も著者に連絡して授権を得て出典を明記してください.