ホームページ >ウェブフロントエンド >jsチュートリアル >FileReader は写真をアップロードする前にローカル プレビューを実装します
FileReader は写真をアップロードする前にローカル プレビューを実装します
- php中世界最好的语言オリジナル
- 2018-04-12 14:53:291550ブラウズ
今回は、画像をアップロードする前にローカル プレビューを行う FileReader の実装について紹介します。画像をアップロードする前に FileReader でローカル プレビューを実装する際の 注意事項 については、次のとおりです。
はじめに
画像をアップロードしてプレビューする場合、特別な要件がない場合は、最初に画像を背景に直接転送し、URL を取得してページに表示することができます。比較的小さいですが、大きい場合は遅くなります。その場合のみプレビューが表示され、ジャンク ファイルも生成されるため、アップロードする前にローカルでプレビューすることをお勧めします。 プロジェクトに取り組んでプラグインを探していたとき、純粋なフロントエンドで画像のローカル プレビューが実現できることは知っていましたが、今日のインタビューでそれについて尋ねられたとき、うっかり混乱してしまいました。コンピューターのデスクトップ上で実装されたデモを見つけて、そのデモに基づいて API を見て簡単にまとめました。 まず、File オブジェクトを取得する必要がありますinput タグ
を使用して画像をアップロードすると、イベント オブジェクトにはファイル オブジェクトのコレクションが含まれます
event.target.files
MDN によると:
FileReader オブジェクトを使用すると、Web アプリケーションは、読み取るファイルまたはデータを指定する File または Blob オブジェクトを使用して、ユーザーのコンピューターに保存されているファイル (または生データ バッファー) の内容を非同期に読み取ることができます。 まず、FileReader のインスタンス オブジェクトをconstructor
var freader = new FileReader();として取得する必要があります readAsDataURL() メソッドを使用して、指定されたコンテンツを読み取ります
freader.readAsDataURL(file);最後は
イベント処理
で、これは読み込みの進行状況を監視することに相当します。ここでは読み込みが完了したときに画像をレンダリングするので、onloadfreader.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('src', e.target.result);
}
}
}
</script>
</body>
</html>
追記
この出来事は、新しいことを学ぶ際に私が抱えている問題の 1 つを明らかにしました。この習慣は、今後、質問を見つけたときに、その方法を確認する必要があるだけではありません。はい、なぜそれができるのか、そしてなぜそれができるのかを理解する必要があります。また、いつものコードを手でタイプして、それをコピーしないようにすることもできますが、それをコピーするのはしばらく楽しいですが、手で書くことができないのは恥ずかしいです。
この記事の事例を読んだ後、あなたはその方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
要素UI Excelのエクスポート方法
vue-dplayer hls再生を実装する手順の詳細な説明
以上がFileReader は写真をアップロードする前にローカル プレビューを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。