Cartman0/slect_and_read_image_and_print_WidthHeight_image_DataURL_with_fileAPI.html

## slect_and_read_image_and_print_WidthHeight_image_DataURL_with_fileAPI.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>FileAPI で画像を選択またはドラッグ&ドロップし、表示</title>
    <style>
      html, body {
        font-size: 20px;
        text-align: center;
      }

      div#drop-zone {
        margin: 1rem auto;
        width: 20rem;
        height: 10rem;
        border: 1px solid #333;
      }

      div#print_image {
        margin: 1rem auto;
      }

      textarea {
        width: 100%;
        height: 10rem;
        margin: 1rem auto;
      }
    </style>
  </head>
  <body>
    <h1>FileAPI で画像を選択またはドラッグ&ドロップし、表示</h1>
    <p>画像を選択！</p>
    <input type="file" id="file-image" accept="image/*">
    <p>or</p>
    <div id="drop-zone">ここにドロップ！</div>
    <div id="print_img">
      <p id="width-height">width: height: </p>
      <p>↓以下に画像を表示</p>
      <img id="image" alt="">
      <p>↓以下にdataURLを表示</p>
      <textarea name="name" id="print_DataURL" readonly></textarea>
    </div>

    <script>
      (function() {
        /*
        http://www.html5rocks.com/ja/tutorials/file/dndfiles/
        http://www.pori2.net/html5/File/040.html
        */
        var print_img_id = 'print_img';
        var print_DataURL_id = 'print_DataURL';
        if (checkFileApi()){
          //ファイル選択
          var file_image = document.getElementById('file-image');
          file_image.addEventListener('change', selectReadfile, false);

          //ドラッグオンドロップ
          var dropZone = document.getElementById('drop-zone');
          dropZone.addEventListener('dragover', handleDragOver, false);
          dropZone.addEventListener('drop', handleDragDropFile, false);
        }

        // FileAPIに対応しているか
        function checkFileApi() {
          // Check for the various File API support.
          if (window.File && window.FileReader && window.FileList && window.Blob) {
            // Great success! All the File APIs are supported.
            return true;
          }
          alert('The File APIs are not fully supported in this browser.');
          return false;
        }

        //ファイルが選択されたら読み込む
        function selectReadfile(e) {
          var file = e.target.files;
          var reader = new FileReader();
          //dataURL形式でファイルを読み込む
          reader.readAsDataURL(file[0]);
          //ファイルの読込が終了した時の処理
          reader.onload = function(){
            readImage(reader, print_img_id, print_DataURL_id);
          }
        }

        //ドラッグオンドロップ
        function handleDragOver(e) {
          e.stopPropagation();
          e.preventDefault();
          e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
        }
        function handleDragDropFile(e) {
          e.stopPropagation();
          e.preventDefault();
          var files = e.dataTransfer.files; // FileList object.
          var file = files[0];
          var reader = new FileReader();
          //dataURL形式でファイルを読み込む
          reader.readAsDataURL(file);

          //ファイルの読込が終了した時の処理
          reader.onload = function(){
            readImage(reader, print_img_id, print_DataURL_id);
          }

        }

        //ファイルの読込が終了した時の処理
        function readImage(reader, print_image_id, print_DataURL_id ){
          //ファイル読み取り後の処理
          var result_DataURL = reader.result;

          //読み込んだ画像とdataURLを書き出す
          var img = document.getElementById('image');
          var src = document.createAttribute('src');
          src.value = result_DataURL;
          img.setAttributeNode(src);
          document.getElementById(print_DataURL_id).value = result_DataURL;
          printWidthHeight('image', 'width-height');
        }

        //width, height表示
        function printWidthHeight( img_id, width_height_id ) {
          var img = document.getElementById(img_id);
          var w = img.naturalWidth;
          var h = img.naturalHeight;
          document.getElementById(width_height_id).innerHTML = 'width:' + w + ' height:' + h;
        }
      })();
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>FileAPI で画像を選択またはドラッグ&ドロップし、表示</title>
	<style>
	html, body {
	font-size: 20px;
	text-align: center;
	}

	div#drop-zone {
	margin: 1rem auto;
	width: 20rem;
	height: 10rem;
	border: 1px solid #333;
	}

	div#print_image {
	margin: 1rem auto;
	}

	textarea {
	width: 100%;
	height: 10rem;
	margin: 1rem auto;
	}
	</style>
	</head>
	<body>
	<h1>FileAPI で画像を選択またはドラッグ&ドロップし、表示</h1>
	<p>画像を選択！</p>
	<input type="file" id="file-image" accept="image/*">
	<p>or</p>
	<div id="drop-zone">ここにドロップ！</div>
	<div id="print_img">
	<p id="width-height">width: height: </p>
	<p>↓以下に画像を表示</p>
	<img id="image" alt="">
	<p>↓以下にdataURLを表示</p>
	<textarea name="name" id="print_DataURL" readonly></textarea>
	</div>

	<script>
	(function() {
	/*
	http://www.html5rocks.com/ja/tutorials/file/dndfiles/
	http://www.pori2.net/html5/File/040.html
	*/
	var print_img_id = 'print_img';
	var print_DataURL_id = 'print_DataURL';
	if (checkFileApi()){
	//ファイル選択
	var file_image = document.getElementById('file-image');
	file_image.addEventListener('change', selectReadfile, false);

	//ドラッグオンドロップ
	var dropZone = document.getElementById('drop-zone');
	dropZone.addEventListener('dragover', handleDragOver, false);
	dropZone.addEventListener('drop', handleDragDropFile, false);
	}

	// FileAPIに対応しているか
	function checkFileApi() {
	// Check for the various File API support.
	if (window.File && window.FileReader && window.FileList && window.Blob) {
	// Great success! All the File APIs are supported.
	return true;
	}
	alert('The File APIs are not fully supported in this browser.');
	return false;
	}

	//ファイルが選択されたら読み込む
	function selectReadfile(e) {
	var file = e.target.files;
	var reader = new FileReader();
	//dataURL形式でファイルを読み込む
	reader.readAsDataURL(file[0]);
	//ファイルの読込が終了した時の処理
	reader.onload = function(){
	readImage(reader, print_img_id, print_DataURL_id);
	}
	}

	//ドラッグオンドロップ
	function handleDragOver(e) {
	e.stopPropagation();
	e.preventDefault();
	e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
	}
	function handleDragDropFile(e) {
	e.stopPropagation();
	e.preventDefault();
	var files = e.dataTransfer.files; // FileList object.
	var file = files[0];
	var reader = new FileReader();
	//dataURL形式でファイルを読み込む
	reader.readAsDataURL(file);

	//ファイルの読込が終了した時の処理
	reader.onload = function(){
	readImage(reader, print_img_id, print_DataURL_id);
	}

	}

	//ファイルの読込が終了した時の処理
	function readImage(reader, print_image_id, print_DataURL_id ){
	//ファイル読み取り後の処理
	var result_DataURL = reader.result;

	//読み込んだ画像とdataURLを書き出す
	var img = document.getElementById('image');
	var src = document.createAttribute('src');
	src.value = result_DataURL;
	img.setAttributeNode(src);
	document.getElementById(print_DataURL_id).value = result_DataURL;
	printWidthHeight('image', 'width-height');
	}

	//width, height表示
	function printWidthHeight( img_id, width_height_id ) {
	var img = document.getElementById(img_id);
	var w = img.naturalWidth;
	var h = img.naturalHeight;
	document.getElementById(width_height_id).innerHTML = 'width:' + w + ' height:' + h;
	}
	})();
	</script>
	</body>
	</html>