JS で FileReader を使用して、写真をアップロードする前にローカル プレビュー機能を実装する方法

FileReader オブジェクトを使用すると、Web アプリケーションは、読み取るファイルまたはデータを指定する File または Blob オブジェクトを使用して、ユーザーのコンピューターに保存されているファイル (または生データ バッファー) の内容を非同期的に読み取ることができます。この記事では、JS で FileReader を使用して画像をアップロードする前にローカル プレビューを実装する方法を紹介します。必要な友達はそれを参照してください

はじめに

画像のアップロード プレビューを行うとき、特別な要件がない場合、画像を直接アップロードしてバックグラウンドに移動し、成功後に URL を取得してページにレンダリングするだけです。画像が比較的小さい場合は、プレビューの表示が遅くなります。 , ジャンクファイルも生成されるので、アップロードする前にローカルでプレビューした方が良いでしょう。

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

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

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

event.target.files

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

MDN によると:

FileReader オブジェクトにより、Web アプリケーションはファイル (または生データ バッファー) の内容を非同期的に読み取ることができますファイルまたは Blob オブジェクトを使用して、読み取るファイルまたはデータを指定し、ユーザーのコンピューターに保存されます。

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

var freader = new FileReader();

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

freader.readAsDataURL(file);

最後に、イベント処理があります。ここでは、読み取りが完了したときにイメージをレンダリングするので、ラックがロードされた後、最終的に取得するのは、base64 でエンコードされた src アドレスです。次回は具体的な理由を説明して、base64 に関する特別な記事を書きます。 コーディング記事

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

以上が私がまとめたものであり、今後皆さんのお役に立てれば幸いです。

関連記事:

ノードの process モジュールと child_process モジュールを学習する方法 (詳細なチュートリアル)

jQuery+JSONP によるクロスドメイン リクエスト メソッド (詳細なチュートリアル)

Vue2.0 を使用するhttpリクエストと読み込み表示を実装

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