superbrothers/fileapi.html

## fileapi.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>File API</title>
    <meta charset="UTF-8">
</head>
<body>
    <h1>File API</h1>
    <div id="result">使用できない</div>
    <script>
        if (window.File) {
            document.getElementById("result").innerHTML = "使用できる";
        }
    </script>

    <input type="file" id="file">
    <h2>ファイル情報</h2>
    <input type="button" id="button" value="情報を取得">
    <div id="info"></div>
    <script>
        document.getElementById("button").addEventListener("click", function () {
            var file = document.getElementById("file").files[0];
            if (file) {
                var info = document.getElementById("info");
                info.innerHTML = "";
                for(var index in file) {
                    info.innerHTML += index + ": " + file[index] + "<br>";
                }

                if (file.type.match(/image\/(jpeg|png|gif)/)) {
                    info.innerHTML += '<img src="' + file.getAsDataURL() + '"><br>';
                }
            } else {
                alert("ファイルが選択されていません");
            }
        }, false);
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<title>File API</title>
	<meta charset="UTF-8">
	</head>
	<body>
	<h1>File API</h1>
	<div id="result">使用できない</div>
	<script>
	if (window.File) {
	document.getElementById("result").innerHTML = "使用できる";
	}
	</script>

	<input type="file" id="file">
	<h2>ファイル情報</h2>
	<input type="button" id="button" value="情報を取得">
	<div id="info"></div>
	<script>
	document.getElementById("button").addEventListener("click", function () {
	var file = document.getElementById("file").files[0];
	if (file) {
	var info = document.getElementById("info");
	info.innerHTML = "";
	for(var index in file) {
	info.innerHTML += index + ": " + file[index] + "<br>";
	}

	if (file.type.match(/image\/(jpeg\|png\|gif)/)) {
	info.innerHTML += '<img src="' + file.getAsDataURL() + '"><br>';
	}
	} else {
	alert("ファイルが選択されていません");
	}
	}, false);
	</script>
	</body>
	</html>