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

今回は、画像をアップロードする前にローカル プレビューを行う FileReader の実装について紹介します。画像をアップロードする前に FileReader でローカル プレビューを実装する際の 注意事項 については、次のとおりです。

はじめに

画像をアップロードしてプレビューする場合、特別な要件がない場合は、最初に画像を背景に直接転送し、URL を取得してページに表示することができます。比較的小さいですが、大きい場合は遅くなります。その場合のみプレビューが表示され、ジャンク ファイルも生成されるため、アップロードする前にローカルでプレビューすることをお勧めします。

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

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

input タグ

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

event.target.files

コアは FileReader オブジェクトです

MDN によると:

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

まず、FileReader のインスタンス オブジェクトを

constructor

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 エンコードに関する特別な記事を書きます。 完全なコード

nbsp;html>


 <meta>
 <title>Document</title>


 

         

 <script> function changImg(e){ var myImg = document.getElementById(&#39;myImg&#39;); for (var i = 0; i < e.target.files.length; i++) { var file = e.target.files[i]; console.log(file); if (!(/^image\/.*$/i.test(file.type))) { continue; //不是图片 就跳出这一次循环 } //实例化FileReader API var freader = new FileReader(); freader.readAsDataURL(file); freader.onload = function(e) { console.log(e); myImg.setAttribute(&#39;src&#39;, e.target.result); } } } </script> 追記

​​ この出来事は、新しいことを学ぶ際に私が抱えている問題の 1 つを明らかにしました。この習慣は、今後、質問を見つけたときに、その方法を確認する必要があるだけではありません。はい、なぜそれができるのか、そしてなぜそれができるのかを理解する必要があります。また、いつものコードを手でタイプして、それをコピーしないようにすることもできますが、それをコピーするのはしばらく楽しいですが、手で書くことができないのは恥ずかしいです。

この記事の事例を読んだ後、あなたはその方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

要素UI Excelのエクスポート方法

vue-dplayer hls再生を実装する手順の詳細な説明

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