FileReader は画像をアップロードする前にローカルでプレビューします。

FileReader オブジェクトを使用すると、Web アプリケーションは、読み取るファイルまたはデータを指定する File または Blob オブジェクトを使用して、ユーザーのコンピューターに保存されているファイル (または生データ バッファー) の内容を非同期的に読み取ることができます。画像をアップロードしてプレビューする場合、特別な要件がない場合は、最初に画像を背景に直接転送し、URL を取得してページに表示することができます。比較的小さいですが、大きい場合は遅くなります。その場合のみプレビューが表示され、ジャンク ファイルも生成されるため、アップロードする前にローカルでプレビューすることをお勧めします。

プロジェクトに取り組んでいてプラグインを探していたとき、純粋なフロントエンドで画像のローカル プレビューを実現できることは知っていましたが、今日のインタビュー中に質問されて、偶然発見しました。コンピューターのデスクトップにデモを実装し、それに基づいてデモで API を確認し、簡単にまとめました:

まず File オブジェクトを取得する必要があります

input タグを使用して画像をアップロードすると、イベント オブジェクトにコレクションが含まれますファイル オブジェクトの

event.target.files

中心となるのは FileReader オブジェクトです

MDN によると:

FileReader オブジェクトを使用すると、Web アプリケーションは、ユーザーのコンピューターで、File または BLOB オブジェクトを使用して、読み取るファイルまたはデータを指定します。

まず、コンストラクターとしてFileReaderのインスタンスオブジェクトを取得する必要があります

var freader = new FileReader();

readAsDataURL()メソッドを使って、指定されたコンテンツを読み込みます

freader.readAsDataURL(file);

最後はイベント処理で、読み込みの進行状況を監視することに相当します。読み込みが完了したらこちら 画像をレンダリングするので、onload

freader.onload = function(e) { console.log(e); myImg.setAttribute('src', e.target.result); }

フレームの読み込みが完了したら、最終的にbase64でエンコードされたsrcアドレスが得られます。具体的な理由は次回調べて、特別に書きます。 Base64 エンコードに関する記事

完全なコード

追記

この事件は、新しいことを学ぶ際に私が抱えている問題の 1 つを明らかにしました。この習慣は特に有害です。今後、質問を見つけたときは、それが何であるかを確認するだけでなく、それが何であるのか、なぜそれができるのかを理解する必要があります。 。また、コードを手で入力してコピーしないようにすることもできますが、コピーするのはしばらく楽しいですが、手で書くことができないのは恥ずかしいです。

今日は杭州での 3 日目、インタビューの 2 日目です。この 2 日間のインタビューで明らかになった重要な問題は、私が普段検索エンジンに頼りすぎていて、簡単なことさえ覚えていないということです。 API は確かに覚えなければならないことがたくさんあります。これを覚えていないのは基礎が不十分であることを意味します。ものづくりの能力には影響しませんが、技術が進歩するためには、この基礎が安定していなければなりませんので、覚えておいてください。

関連する推奨事項:

JavaScript 画像のローカル プレビュー関数を実装する方法

jquery はブラウザ互換の画像アップロード ローカル プレビュー関数を実装します_jquery

jquery は画像アップロードの前にローカル プレビュー関数を実装します_jquery

以上がFileReader は画像をアップロードする前にローカルでプレビューします。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。