画像をアップロードするときにローカルでプレビューする方法-jsチュートリアル-php.cn

画像をアップロードするときにローカルでプレビューする方法

php中世界最好的语言

リリース： 2018-03-17 11:53:44

オリジナル

1973 人が閲覧しました

今回は、写真をアップロードする際にまずローカルでプレビューする方法を説明します。写真をアップロードする際に注意すべき注意点は何ですか。実際のケースを見てみましょう。

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

のリファレンスを参照してください。

下アップロードしてプレビューする場合、成功後にバックグラウンドに移動し、URL をページに表示します。画像が比較的小さい場合は、プレビューの表示が遅くなります。ジャンクファイルも生成されるため、アップロードする前にローカルでプレビューすることをお勧めします。プロジェクトに取り組んでプラグインを探していたとき、純粋なフロントエンドで画像のローカルプレビューが実現できることは知っていましたが、今日の面接でそれについて質問されて混乱し、その後私はコンピューターのデスクトップ上で実装されたデモを偶然発見し、そのデモに基づいて API をチェックし、簡単にまとめました:

event.target.files

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

input タグ

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

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

MDN によると: FileReader オブジェクトにより、Web アプリケーションはファイルの内容を非同期的に読み取ることができますファイルまたは Blob オブジェクトを使用して、読み取られるファイルまたはデータのコンテンツを指定します。

まず、

コンストラクター

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

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>

ログイン後にコピー

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

自動更新と自動取得にCookieの有効期限を設定する

🎜🎜🎜JSをパッケージ化するためにimportとrequireを使用する🎜🎜🎜🎜🎜selectのオプションオーバーレイに対処する方法🎜🎜

以上が画像をアップロードするときにローカルでプレビューする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。