読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

HTML5でファイル操作

<スポンサーリンク>

HTML内からファイルアクセスのために用意された機能は「FileAPI」という。
ファイルをアップロードするためのコントローラは以下のように記述する。

<input type="file">

このタグで選択されたファイルはFileオブジェクトとして取り出せるようになっている。

・ファイル名を取得するサンプル

<!DCOTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="content-Type" content="text/html; charset=Windows-31J">
  <title>ファイルサンプル</title>
  <style>
  h1 {
  	font-size: 18pt;
  	background: #AAAAEE;
  	padding: 5px;
  }
  </style>
  <script type="text/javascript">
  function dochange(event) {
  	var file = event.target.files[0];
  	if (file) {
  		//ファイル名を取得する
  		var msg = "選択したのは[" + file.name + "]です";
  		document.querySelector("#msg").innerHTML = msg;
  	}
  }
  </script>
</head>
<body>
   <header>
   	  <h1>File Sample</h1>
   </header>
   <article>
   	  <p id="msg">File APIのサンプル</p>
   	  <hr>
   	  <input type="file" id="file1" onchange="dochange(event);">
   </article>
</body>
</html>

・Fileオブジェクトの使い方。
ファイルのサイズやファイルの更新日時、ファイルタイプを表示する。

<!DCOTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="content-Type" content="text/html; charset=Windows-31J">
  <title>ファイルサンプル</title>
  <style>
  h1 {
  	font-size: 20pt;
  	background: #AAAAEE;
  	padding: 2px;
  }
  </style>
  <script type="text/javascript">
  function dochange(event) {
  	var file = event.target.files[0];
  	if (file) {
  		file.name = file.name + "<>";
  		var name = file.name;
  		var size = file.size;
  		var type = file.type;
  		//最終修正日の情報。値はDateオブジェクトで得られる
  		var modify = file.lastModifiedDate;
  		var str = "名前:" + name + "<br>";
  		str += "サイズ" + size + "<br>";
  		str += "タイプ" + type + "<br>";
  		str += "最終更新日時:" + modify + "<br>";
  		document.getElementById("msg").innerHTML = str;
  	}
  }
  </script>
</head>
<body>
   <header>
   	  <h1>File Sample</h1>
   </header>
   <article>
   	  <p id="msg">File APIのサンプル</p>
   	  <hr>
   	  <input type="file" id="file1" onchange="dochange(event);">
   </article>
</body>
</html>

・ファイルをドラッグ&ドロップで表示する。

<!DCOTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="content-Type" content="text/html; charset=Windows-31J">
  <title>ファイルサンプル</title>
  <style>
  h1 {
  	font-size: 18pt;
  	background: #AAAAEE;
  	padding: 5px;
  }
  .droped {
  	border: solid 1px gray;
  	background: #FFEEEE;
  }
  </style>
  <script type="text/javascript">
  function doDragOver(event) {
	var types = event.dataTransfer.types;
	if (types == null) return true;
	var flg = true;
	for(var i=0; i < types.length; i++) {
		if(types[i] == "Files") {
			flg = false;
			break;
		}
  	}
  	return flg;
  }
  
  function doDrop(event) {
  	var div = document.querySelector("#list");
  	var files = event.dataTransfer.files;
  	var res = "";
  	for(var i = 0; i < files.length; i++) {
  		res += "<li>" + files[i].name + "," + files[i].size +"byte</li>";
	}
	div.innerHTML = res;
	event.preventDefault();
  }
  </script>
</head>
<body>
   <header>
   	  <h1>File Sample</h1>
   </header>
   <article>
   	  <p id="msg">File APIのサンプル</p>
   	  <div id="div1" ondragover="return doDragOver(event);"
   	  	ondrop="doDrop(event);" class="droped"
   	  	style="width:200px; height:100px;">ここにドロップ</div>
   	  <hr>
   	  <ol id="list"> </ol>
   </article>
</body>
</html>
 

こちらの本をものすごく参考にさせていただきました・・。
サンプルが豊富に載っていて、HTMLに慣れてきた人にオススメです。
超初心者にはちょっと解説が足りないかも。

HTML5 Webアプリケーションプログラミング入門

HTML5 Webアプリケーションプログラミング入門