FileReader は写真をアップロードする前にローカルプレビューを実装します-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-04-12 14:53:29

オリジナル

1548 人が閲覧しました

今回は、画像をアップロードする前にローカルプレビューを行う 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 サイトの他の関連記事を参照してください。