File、FileReader、FormData

File、FileReader、FormData
最近は業務のために、もう一度htmlのアップロードファイルを勉強しました.ファイルによくある概念を明確にして、後で回顧するのに便利です.
ファイル
Fileは名前の通りにファイルです.FileReaderと区別してください.Fileは、Blobから継承され、バイナリの大きなオブジェクトであり、Fileは、大きなファイルのセグメント化の切り取りを実現するための重要な方法であるFile.slice()がある.htmlでは、Fileは、FileListから来ても良いし、ドラッグ・イベントから来ても良い.
FileReader
FileReaderは、FileをJavaScriptに読み込むためのアプリであり、ファイルの内容を読み込むと、readAsDataURLを利用してプレビュー画像を実現するなど、後続の操作が可能である.
FormData
FormDataの出現は、Ajaxで頻繁に使用されるプログレッシブ動作を解決するために制定されたもので、formData.append("webmasterfile", blob);という方式でデータを自動的にプログレッシブし、XMLHttpRequestを利用してプログレッシブ後のデータを送信する.
ファイルをアップロード
以上のいくつかの点を利用して、ファイルをアップロードする際には、FileReaderを使ってファイルの内容を読み取ってからFormDataを使ってアップロードしても良いです.もちろん、このような操作は、ファイルの内容をjsに読み込む必要がありますが、全く必要ではありません.formData.append("webmasterfile", file)のように、直接にファイルの内容を読み込まないで、ファイルを普通のフォームデータとしてアップロードすることができます.
画像のプレビュー
画像のプレビューの本質は、ファイルを読み込んだ後に、画像のurlをimg.srcに割り当て、実現する方法はファイルアップロードと同じであり、同様に2つの種類があり得る.1.画像の内容を読み取って、FileReaderのreadAsDataURL方法を用いて、読み取ったdata URLをimg.srcに割り当て、data URLが長いということです.

data:image/jpeg;base64,/9j/4R/+RXhpZgAATU0AKgAAAAgACgEPAAIAAAAGAAAAhgEQAAIAAAAJ...

data URLは長くなります.2.もう一つの比較的優雅な方法は、ファイルの内容を読み取らない場合、window.URL.reate Object URLを利用して、ファイルをメモリに生成するアドレスuriがimg.srcに割り当てられ、アドレスuriが長いということです.

blob:null/a6d04e25-c6e9-4c7d-b1c4-ecf8dab60e35；

簡単で多く、ファイルをjsに読み込む作業も節約しました.