rn404/index.html

## 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>

## 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
}());


## 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;}