FileReaderを使用してフロントエンドの画像プレビューを実現
8507 ワード
FileReaderが現れる前に、フロントエンドのピクチャプレビューは、ローカルピクチャをサーバにアップロードし、サーバがピクチャアドレスを返し、ピクチャ要素のsrc属性に置き換えることで実現されます.
この方法の欠点は,まず画像をサーバにアップロードしなければならないことである.では、問題が発生しました.アップロードされた画像が大きく、ネットの速度が遅い場合は、プレビュー画像が表示されるのを待つ必要があります.また、ユーザーが画像をプレビューした後、あまり満足していないことに気づいたら、画像を再選択したいと思っています.このとき、サーバーにアップロードされた画像を削除しなければなりません.
HTML 5のFileReaderオブジェクトができてから、プレビュー画像はずっと簡単になり、バックグラウンドの協力は不要になり、JSがローカルファイルを操作することが可能になった.この方法の考え方はFileReader.を通じてprototype.readAsData URL()メソッドは、ピクチャファイルをbase 64符号化に変換し、base 64符号化をプレビューピクチャのsrc属性に置き換える.FileReaderオブジェクトの詳細については、ここを参照してください.FileReader
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
以下はFileReaderを使用して画像プレビューを行う簡単なdemoです.
写真のプレビューについてはここまでですが、どこが間違っているのか、質問があったら、親たちはコメントして提出することができます.
今日は大みそかで、出勤の初日で、新しい年、新しい始まり、新しい期待です.2017年の健康とコードのバグがないことを祈ります!
この方法の欠点は,まず画像をサーバにアップロードしなければならないことである.では、問題が発生しました.アップロードされた画像が大きく、ネットの速度が遅い場合は、プレビュー画像が表示されるのを待つ必要があります.また、ユーザーが画像をプレビューした後、あまり満足していないことに気づいたら、画像を再選択したいと思っています.このとき、サーバーにアップロードされた画像を削除しなければなりません.
HTML 5のFileReaderオブジェクトができてから、プレビュー画像はずっと簡単になり、バックグラウンドの協力は不要になり、JSがローカルファイルを操作することが可能になった.この方法の考え方はFileReader.を通じてprototype.readAsData URL()メソッドは、ピクチャファイルをbase 64符号化に変換し、base 64符号化をプレビューピクチャのsrc属性に置き換える.FileReaderオブジェクトの詳細については、ここを参照してください.FileReader
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
以下はFileReaderを使用して画像プレビューを行う簡単なdemoです.
1 doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Documenttitle>
6 head>
7 <body>
8 <input type="file"><br>
9 <img src="" height="200" alt="Image preview area..." title="preview-img">
10 <script>
11 var fileInput = document.querySelector('input[type=file]'),
12 previewImg = document.querySelector('img');
13 fileInput.addEventListener('change', function () {
14 var file = this.files[0];
15 var reader = new FileReader();
16 // reader onload ， ， base64
17 reader.addEventListener("load", function () {
18 previewImg.src = reader.result;
19 }, false);
20 // reader.readAsDataURL() ， base64
21 reader.readAsDataURL(file);
22 }, false);
23 script>
24 body>
25 html>写真のプレビューについてはここまでですが、どこが間違っているのか、質問があったら、親たちはコメントして提出することができます.
今日は大みそかで、出勤の初日で、新しい年、新しい始まり、新しい期待です.2017年の健康とコードのバグがないことを祈ります!