ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。