FileReader は写真をアップロードする前にローカル プレビューを実装します

通常、画像をアップロードしてプレビューする場合、特別な要件がない場合は、成功後に画像を背景に直接転送して、URL を取得してページにレンダリングします。画像が比較的小さい場合は問題は発生しません。 , ただし、大きい方が良いです。プレビューに時間がかかり、ジャンクファイルが生成されるため、アップロードする前にローカルでプレビューした方が良いです。

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

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

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

event.target.files

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

MDN によると:

FileReader オブジェクトを使用すると、Web アプリケーションがファイル (または生データ) の内容を非同期的に読み取ることができますバッファ）を使用して、ファイルまたは 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 は確かに覚えなければならないことがたくさんあります。これを覚えていないのは基礎が不十分であることを意味します。ものづくりの能力には影響しませんが、技術が進歩するためには、この基礎が安定していなければなりませんので、覚えておいてください。

関連する推奨事項:

H5 のファイル ドメイン FileReader はセグメント内のファイルをどのように読み取り、サーバーにアップロードしますか?

JavaScript は FileReader を使用して画像アップロードのプレビュー効果を実現します

での FileReader インターフェイスの使用方法の分析HTML5

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