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

php中世界最好的语言
リリース: 2018-04-12 14:53:29
オリジナル
1517 人が閲覧しました

今回は、画像をアップロードする前にローカル プレビューを行う 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 エンコードに関する特別な記事を書きます。 完全なコード

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <form action=""> 
 <input type="file" name="files" id="fileTog" accept="image/*" multiple="multiple" onchange="changImg(event)"> 
 <img alt="暂无图片" id="myImg" src="" height="100px" width="100px"> 
 </form>
 <script>
 function changImg(e){ 
 var myImg = document.getElementById('myImg');
 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>
</body>
</html>
ログイン後にコピー
追記

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

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

推奨読書:

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

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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート