html 5画像プレビューを実現

18672 ワード

先端

文書ディレクトリ

画像プレビュー効果

FileReader

方法概要

イベントハンドラ

URL

構文

Blob

Tip

画像プレビュー効果
まずdemoを直接与えましょう.このdemoを実行して効果を見てみましょう.


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>blob-fileRendertitle>
	<style>
		#prev1, #prev2 {
			height: 400px;
			width: 100%;
		}
		img {
			height: 100%;
		}
	style>
head>
<body>
		<div id="prev1">
			<input type="file" id="file1" accept="image/*">
			<br>
			<img src="" alt="" id="view1">
		div>
		<br><br>
		<div id="prev2">
			<input type="file" id="file2" accept="image/*">
			<br>
			<img src="" alt="" id="view2">
		div>
<script>
	
	  document.getElementById("file1").addEventListener('change', function(){
	  	var files = this.files;
	  	var file;
	  	if (files && files.length) {
	  	  file = files[0];
	  	  if (/^image\/png$|jpeg$/.test(file.type)) {
	  	    document.getElementById('view1').src = URL.createObjectURL(file);
	  	  } else {
	  	    alert("Please choose an image file with jpg jpeg png.");
	  	  }
	  	} else {
	  	  alert("Please choose image file");
	  	}
	  }, false);

	  document.getElementById("file2").addEventListener('change', function(){
	  	var files = this.files;
	  	var file;
	  	if (files && files.length) {
	  	  file = files[0];
	  	  if (/^image\/png$|jpeg$/.test(file.type)) {
	  	    var reader = new FileReader();
	  	    reader.onload = function (e) {
	  	      document.getElementById('view2').src = e.target.result;
	  	    };
	  	    reader.readAsDataURL(file);
	  	  } else {
	  	    alert("Please choose image file with jpg jpeg png.");
	  	  }
	  	} else {
	  	  alert("Please choose image file");
	  	}
	  }, false);
script>
body>
html>

このhtmlファイルを保存して開くことができます.
この中には2つのファイルを選択するボタンがあり、いずれも画像を選択し、リアルタイムでプレビューする効果を実現しています.しかし、実現の詳細は異なる.
それぞれURLとFileReaderを使って実現しています.
FileReader
FileReaderオブジェクトを使用すると、Webアプリケーションがユーザーコンピュータに格納されているファイル(または元のデータバッファ)の内容を非同期で読み込み、FileまたはBlobオブジェクトを使用して読み込むファイルまたはデータを指定できます.
ここで、Fileオブジェクトは、ユーザが1つの要素上でファイルを選択して戻ってくるFileListオブジェクトからでもよいし、ドラッグアンドドロップ操作によって生成されたDataTransferオブジェクトからでもよいし、1つのHTML CanvasElement上でmozGetAsFile()メソッドを実行した後に結果を返すからでもよい.
FileReaderオブジェクトを作成するには、次のように簡単です.

var reader = new FileReader();

FilerReaderオブジェクトには、次の方法とイベントがあります.
メソッドの概要abort() ; readAsArrayBuffer() ; readAsBinaryString() ; readAsDataURL() ; readAsText() ;
イベントハンドラonabort ; onerror ; onload ; onloadend ; onloadstart ; onprogress ;
メソッドの概要とイベント・ハンドラの詳細な使用方法については、この公式文書を参照することをお勧めします.https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
URL
現代のブラウザでは、URLというオブジェクトがあり、直接使用できます:URL.createObjectURL(file);互換性を考慮すると、次のことができます.

var URL = window.URL || window.webkitURL;

このURLは、オブジェクトURLsを作成および管理するための静的方法を提供する.また、構造関数として呼び出されてURLオブジェクトを構築することもできます.
構文
静的メソッドを呼び出します.

img.src = URL.createObjectURL(blob);

新しいオブジェクトを作成するには、次の手順に従います.

var url = new URL("../cats/", "https://www.example.com/dogs/");

Blob
Blobオブジェクトは、元のデータと同様のファイルオブジェクトを表します.Blobが表すデータはJavaScriptのオリジナルフォーマットとは限らない.FileインタフェースはBlobに基づいて、blob機能を継承し、ユーザーシステム上のファイルをサポートするように拡張します.
だからこそ、URL.createObjectURL(blob);という方法でFileオブジェクトに直接転送することができます.
Blobを他の非blobオブジェクトとデータから構築するには、Blob()コンストラクション関数を使用します.別のblobのデータサブセットを含むblobを作成するには、clice()メソッドを使用します.ユーザーファイルシステム上のファイルからBlobオブジェクトを取得するには、Fileドキュメントを参照してください.
Blobの詳細については、以下を参照してください.https://developer.mozilla.org/zh-CN/docs/Web/API/Blob
Tip
URL.revokeObjectURLメソッドOperaはサポートされていません.FileReaderはIE 9以下を除いてサポートされていません.他のブラウザはサポートされています.
最後に書きます.
規則は配置------ソフトウェア開発の簡略原則より優れている.
--------------------------------
(完)---------------------------------------------------
私の個人サイト:https://neveryu.github.io/guestbook/Github: https://github.com/Neveryu
問題があったら私の微博を私信したりメールを送ったりしてもいいです.

HTML 5とCSS 3開発第六章課後作業

poj 2155 2 Dツリー配列