ホームページ > 記事 > ウェブフロントエンド > 画像をアップロードするときにローカルでプレビューする方法
画像をアップロードするときにローカルでプレビューする方法
- php中世界最好的语言オリジナル
- 2018-03-17 11:53:441955ブラウズ
今回は、写真をアップロードする際にまずローカルでプレビューする方法を説明します。写真をアップロードする際に注意すべき注意点は何ですか。実際のケースを見てみましょう。
FileReader オブジェクトを使用すると、Web アプリケーションは、読み取るファイルまたはデータを指定する File または Blob オブジェクトを使用して、ユーザーのコンピューターに保存されているファイル (または生データ バッファー) の内容を非同期的に読み取ることができます。この記事では、JS の FileRereader で画像をアップロードする前のローカル プレビュー機能を紹介します。必要な方は、
のリファレンスを参照してください。
下 アップロードしてプレビューする場合、成功後にバックグラウンドに移動し、URL をページに表示します。画像が比較的小さい場合は、プレビューの表示が遅くなります。ジャンクファイルも生成されるため、アップロードする前にローカルでプレビューすることをお勧めします。 プロジェクトに取り組んでプラグインを探していたとき、純粋なフロントエンドで画像のローカルプレビューが実現できることは知っていましたが、今日の面接でそれについて質問されて混乱し、その後私はコンピューターのデスクトップ上で実装されたデモを偶然発見し、そのデモに基づいて API をチェックし、簡単にまとめました:
event.target.files
input タグ
を使用して、画像をアップロードすると、イベント オブジェクトにはファイル オブジェクトのコレクションが含まれますMDN によると: FileReader オブジェクトにより、Web アプリケーションはファイルの内容を非同期的に読み取ることができますファイルまたは Blob オブジェクトを使用して、読み取られるファイルまたはデータのコンテンツを指定します。
まず、
コンストラクターとして、FileReaderのインスタンスオブジェクトを取得する必要があります
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>
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書: 🎜🎜🎜JSをパッケージ化するためにimportとrequireを使用する🎜🎜🎜🎜🎜selectのオプションオーバーレイに対処する方法🎜🎜
以上が画像をアップロードするときにローカルでプレビューする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。