おしゃべりFile API

参考JavaScriptプレミアムプログラミング(第3版)
ユーザコンピュータのファイルに直接アクセスできないことは,Webアプリケーション開発における大きな障害である.数年前、ファイルを処理する唯一の方法はフォームにフィールドを追加することでした.
File APIの目的は、クライアントがユーザコンピュータ内のファイルにアクセスし、これらのファイルをよりよく操作するための安全な方法をWeb開発者に提供することである.
File APIは、フォーム内のファイル入力フィールドに基づいて、ファイル情報に直接アクセスするインタフェースを追加します.HTML 5は、DOMでファイル入力要素にfilesセットを追加します.
ファイル入力フィールドで1つ以上のファイルを選択すると、filesセットには1つのファイルに対応するFileオブジェクトのセットが含まれます.各Fileオブジェクトには、次の読み取り専用プロパティがあります.

name:ローカルシステムのファイル名

sieze:ファイルのバイトサイズ

type:文字列、ファイルのMIMEタイプ

lastModifiedDate:文字列、ファイルが最後に変更された時間;

inputFile.onchange = function(e) {
    var target = e.target;
    console.log(target.files);  //        
}

FileReaderタイプ
FileReaderタイプは、非同期ファイル読み込みメカニズムを実現します.
方法:

readAsText(file, encoding)

は、ファイルを純粋なテキスト形式で読み取り、読み込まれたテキストをresultプロパティに保存します.2番目のパラメータは、符号化タイプを指定するために使用され、オプションである.

readAsDataURL(file)

ファイルを読み込み、resultプロパティにデータURIとして保存

ピクチャであればbase 64フォーマット

readAsBinaryString(file)

ファイルを読み込み、resultプロパティに1つの文字列を保存します.文字列の各文字は1バイト

を表します.

readAsArrayBuffer(file)

ファイルを読み込み、ファイルの内容を含むArrayBufferをresultプロパティに保存します.

abort()

は、読み出しプロセス

を中断する.

最も役立つ3つのイベント:

progress

読み出し中にトリガ(固定ミリ秒数毎にトリガ)

.

eventオブジェクトには、lenthComputable、loaded、totalの3つのプロパティが含まれています.

erro読み出しエラー

load読み込み成功

ファイルピクチャの例を読み込む

inputFile.onchange = function (e) {
   var file = e.target.files[0]  //         
   var reader = new FileReader()	//         


    reader.onprogress = function(e) {
       console.log(e.loaded / e.total)
    }
    reader.onerror = function(){
       console.log('      ')
    }
    reader.onload = function(){
       console.log('      ')
       img.src = reader.result
    }
    reader.readAsDataURL(file)	//       URI     result   
}

ファイル部分の内容

inputFile.onchange = function (e) {   //            ，       
    var file = e.target.files[0]
    var reader = new FileReader(), 
        blob = file.slice(0, 20)  //       ， 0     20   
            
    reader.readAsText(blob)   //         blob  
    reader.onload = function(){
         console.log('      ', reader.result)
    }
}

オブジェクトURL
オブジェクトURLはblob URLとも呼ばれ、FileまたはBlobに保存されたデータを参照するURLを指す.オブジェクトURLを使用するメリットは、JavaScriptにファイル内容を読み込まずに直接ファイル内容を使用できることです.ファイルの内容が必要な場所に対象URLを提供すればよい.
オブジェクトURLはblob URLとも呼ばれ、FileまたはBlobに保存されたデータを参照するURLを指す.オブジェクトURLを使用するメリットは、JavaScriptにファイル内容を読み込まずに直接ファイル内容を使用できることです.ファイルの内容が必要な場所に対象URLを提供すればよい.
オブジェクトURLを作成するには、URLを使用します.createObjectURL()メソッドを使用して、FileオブジェクトまたはBlobオブジェクトに転送します.

inputFile.onchange = function(e) {
    var file = e.target.files[0]
    url = URL.createObjectURL(file)
    
    img.src = url
}

この関数の戻り値は、blob:で始まる文字列で、メモリのアドレスを指します.
この文字列はURLであるため、ページで使用できるものはすべて(一般的に画像のsrc指向に用いられる).
対応するデータが不要になった場合は、メモリを解放したほうがいいです.しかし、参照オブジェクトのURLにコードがある限り、メモリは解放されません.
手動リリース:URL.revokeObjectURL(url);
このメソッドを呼び出すことで、ブラウザにこのファイルへの参照をメモリに保持し続ける必要がないことを知らせます.
 
ドラッグ＆ドロップしたファイルの読み込み
ドラッグしたファイル情報はeventに保存されます.dataTransfer.files内

//              
box.ondragenter = box.ondragover = function (e) {
    e.preventDefault()
}

box.ondrop = function (e) {
   var file = e.dataTransfer.files[0] 

   var reader = new FileReader()
   reader.readAsDataURL(file)
   reader.onload = function () {
       img.src = reader.result
   }

   e.preventDefault()
   //         ，    ，       ，                 
   e.stopPropagation() 
}

XHRを使用してドラッグ＆ドロップしたファイルをアップロードする
FormDataタイプを使用すると簡単で、フォームを介したアップロードと同じ結果になります.

//              
box.ondragenter = box.ondragover = function (e) {
    e.preventDefault()
}


box.ondrop = function (e) {
    let file = e.dataTransfer.files[0], data = new FormData()

    data.append('dropFile', file)
    
    //     node     ，          ，    
    var xhr = new XMLHttpRequest()
    xhr.open('post', 'http://localhost:3000/upload');
    xhr.send(data);	//       
    xhr.onreadystatechange = function(){
        if((xhr.status >= 200 && xhr.status < 400) && xhr.readyState === 4) {
            console.log(xhr.responseText)
            img.src = ('http://localhost:3000/' + xhr.responseText)
        }
    }

    e.preventDefault()
    e.stopPropagation()
}