rn404 · October 2, 2012 06:16
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 		<meta http-equiv="Content-Style-Type" content="text/css">
 		<meta http-equiv="Content-Script-Type" content="text/javascript">
 		<link rel="stylesheet" media="all" type="text/css" href="styles.css">
 	</head>
 	<body>
 		<form id="fileSelect">
 			<input type="file" id="myFile">
 		</form>
 		<textarea id="output"></textarea>
 		<div id="fileDetail"></div>
 		<div id="imgOutput"></div>
 		
 		<div id="debug"></div>
 		<script src="https://raw.github.com/zentooo/Riddle.js/develop/src/riddle.min.js"></script>
 		<script src="script.js"></script>
 	</body>
 </html>
diff --git a/script.js b/script.js
 (function () {
 	
 	// For Debug
 	function Error (message) {
 		if (console) {
 			console.log(message);
 		} else if (document.getElementById("debug")) {
 			document.getElementById("debug").innerText += message;
 		} else {
 			alert(message);
 		};
 	};
 	
 	File.opeCheck = function () {
 		if (window.File && window.FileReader && window.FileList && window.Blob) {
 			return true;
 		} else {
 			Error("The File APIs are not fully supported in this browser");
 			return false;
 		};
 	};
 	
 	File.reader = function (file) {
 		var reader = new FileReader(), output = "output";
 		reader.onload = function (e) {
 			document.getElementById(output).innerHTML = e.target.result;
 			File.imgOutput(e.target.result);
 		};
 		reader.readAsDataURL(file);
 	};
 	
 	File.detail = function (file) {
 		var dispElm = "fileDetail",
 		items = [ "name", "size", "type", "lastModifiedDate" ],
 		text = "",
 		prop, i, l;
 		
 		for ( i = 0, l = items.length; i < l; i = i + 1) {
 			prop = items[i];
 			text += prop + " : " + file[prop] + "<br>";
 		};
 		
 		r("#" + dispElm).html(text);
 	};
 	
 	File.imgOutput = function(data) {
 		var wrapper = "imgOutput";
 		r("#" + wrapper).html( '<img src="' + data + '">' );
 	};
 	
 	File.selectInput = function () {
 		var inputElm = "myFile", file;
 		// delete or rewrite here
 		if (typeof r("#" + inputElm)[0] === "undefined") {
 			return false;
 		};
 		
 		r("#"+inputElm).bind("change", function () {
 			file = document.getElementById(inputElm).files[0];
 			if (typeof file === "undefined") {
 				Error("There is no file");
 				return false;
 			};
 			if (!/^image\/(png|jpeg|gif)$/.test(file.type)) {
 				Error("This file is not image data");
 				return false;
 			};
 			File.reader(file);
 			File.detail(file);
 		});
 	};
 	
 	// Do Action
 	if (File.opeCheck() === false) {
 		return false;
 	} else {
 		File.selectInput();
 	};
 	
 	// End of Code
 }());
diff --git a/styles.css b/styles.css
 body{line-height:1.4;font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;font-size:14px;}

 .func{text-decoration:underline;color:#3B5999;cursor:pointer;}
 .func:hover{text-decoration:none;}
 .func:active{color:#ffcc00;}

 #output{width:400px;height:200px;display:block;}

 #imgOutput img{border:5px solid #ddd;}
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<meta http-equiv="Content-Script-Type" content="text/javascript">
	<link rel="stylesheet" media="all" type="text/css" href="styles.css">
	</head>
	<body>
	<form id="fileSelect">
	<input type="file" id="myFile">
	</form>
	<textarea id="output"></textarea>
	<div id="fileDetail"></div>
	<div id="imgOutput"></div>

	<div id="debug"></div>
	<script src="https://raw.github.com/zentooo/Riddle.js/develop/src/riddle.min.js"></script>
	<script src="script.js"></script>
	</body>
	</html>
	(function () {

	// For Debug
	function Error (message) {
	if (console) {
	console.log(message);
	} else if (document.getElementById("debug")) {
	document.getElementById("debug").innerText += message;
	} else {
	alert(message);
	};
	};

	File.opeCheck = function () {
	if (window.File && window.FileReader && window.FileList && window.Blob) {
	return true;
	} else {
	Error("The File APIs are not fully supported in this browser");
	return false;
	};
	};

	File.reader = function (file) {
	var reader = new FileReader(), output = "output";
	reader.onload = function (e) {
	document.getElementById(output).innerHTML = e.target.result;
	File.imgOutput(e.target.result);
	};
	reader.readAsDataURL(file);
	};

	File.detail = function (file) {
	var dispElm = "fileDetail",
	items = [ "name", "size", "type", "lastModifiedDate" ],
	text = "",
	prop, i, l;

	for ( i = 0, l = items.length; i < l; i = i + 1) {
	prop = items[i];
	text += prop + " : " + file[prop] + "<br>";
	};

	r("#" + dispElm).html(text);
	};

	File.imgOutput = function(data) {
	var wrapper = "imgOutput";
	r("#" + wrapper).html( '<img src="' + data + '">' );
	};

	File.selectInput = function () {
	var inputElm = "myFile", file;
	// delete or rewrite here
	if (typeof r("#" + inputElm)[0] === "undefined") {
	return false;
	};

	r("#"+inputElm).bind("change", function () {
	file = document.getElementById(inputElm).files[0];
	if (typeof file === "undefined") {
	Error("There is no file");
	return false;
	};
	if (!/^image\/(png\|jpeg\|gif)$/.test(file.type)) {
	Error("This file is not image data");
	return false;
	};
	File.reader(file);
	File.detail(file);
	});
	};

	// Do Action
	if (File.opeCheck() === false) {
	return false;
	} else {
	File.selectInput();
	};

	// End of Code
	}());
	body{line-height:1.4;font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳＰゴシック',sans-serif;font-size:14px;}

	.func{text-decoration:underline;color:#3B5999;cursor:pointer;}
	.func:hover{text-decoration:none;}
	.func:active{color:#ffcc00;}

	#output{width:400px;height:200px;display:block;}

	#imgOutput img{border:5px solid #ddd;}