1。ファイルAPI
HTML5は、ファイル情報を読み取り、ファイルを読み取ることができるファイルとFileReaderの2つの方法を提供します。
2。例
<html> <body> <div id = "test-image-preview" style = "border：" border：1px solid rgb（204、204、204）; width：100％; height：200px; background-size：contains; background-position：center center; "> </div </<div div </<div div </<div div </<id = <div div </<fid = <div div < type = "file" id = "test-image-file"> <スクリプトタイプ= "text/javascript"> var fileinput = document.getElementbyId（ 'test-image-file'）、info = document.getElementById（ 'test-file-info'）、peberiow = document.getElementbyid（ 'test-image-preview'）; fileInput.addeventListener（ 'change'、function（）{// clear cluree clued emage：preview.style.backgroundimage = ''; //ファイルが選択されているかどうかを確認してください：if（！fileinput.value）{info.innerhtml = 'file selected'; return;} = 'file：file.name +' <br> ' +' size + '<br>' + 'modified：' + file.lastmodifieddate; } read reader = new filreader（）; reader.readasdataurl（file）;}）; </script> </body> </html>DataUrlの形式で読み取られたファイルは、dataに似た文字列です。image/jpeg; base64、/9j/4aaqsk ...（base64エンコーディング）...
一般的に画像のセットアップに使用されます。サーバー側の処理が必要な場合は、String Base64と次の文字をサーバーに送信し、Base64でデコードして元のファイルのバイナリコンテンツを取得します。
3。説明
上記のコードは、シングルスレッド実行モードであるJavaScriptの重要な機能も示しています。 JavaScriptでは、ブラウザのJavaScript実行エンジンは、JavaScriptコードを実行するときに常に単一スレッドモードで実行されます。つまり、JavaScriptコードが同時に1つ以上のスレッドを実行することはいつでも不可能です。
シングルスレッドモードでマルチタスクを処理する方法を尋ねるかもしれません。
JavaScriptでは、上記のコードなど、マルチタスクが実際に非同期に呼び出されます。
reader.readasdataurl（file）;
ファイルの内容を読み取るために、非同期操作が開始されます。それは非同期操作であるため、操作がJavaScriptコードでいつ終了するかはわかりません。したがって、最初にコールバック関数を設定する必要があります。
reader.onload = function（e）{//ファイルが読み取られると、この関数は自動的に呼び出されます：};ファイルの読み取りが完了すると、JavaScriptエンジンが設定したコールバック関数を自動的に呼び出します。コールバック関数が実行されると、ファイルが読み取られているため、コールバック関数内のファイルの内容を安全に取得できます。
JSアップロードファイルのプレビューの上記の簡単な例は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。