kazukgw/fileApiSample.js

## fileApiSample.js
/*
<!doctype html>
<html>
	<head>
		<title></title>
	</head>
	<body>
	以下でFileを選択するとbody に imgタグがappendされる
	<input type="file" id="files" />
	</body>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="./script.js"></script>
	<script>

window.onload = function(){ if( window.File ) {main(); } else {alert('the file apis are not fully supported in this browser.'); } }
</script>
</html>
*/

/******************* JavaScript ****************************/

var main = function main(){
///////////////////////////////////////////////////////////////

function handleFileSelect(evt) {
	//fileList API は 以下で設定
	//イベントオブジェクトの中にふくまれている！！
    var files = evt.target.files; // FileList object
    //FileReaderとか　File とかの APIは windowオブジェクトが親になる
	var reader = new FileReader();
		//reader.onload で画像読み込み後にこの以下の処理を行うように指定
	reader.onload = function(e) {
				alert("hoge");
				$("body").append('<img src="'+ e.target.result +'"/>');
	};

	for(var i = 0; i < files.length;  i++ ){
		reader.readAsDataURL(files[i]);
	}
}

$('#files').bind('change', handleFileSelect);

///////////////////////////////////////////////////////////////
};
	/*
	<!doctype html>
	<html>
	<head>
	<title></title>
	</head>
	<body>
	以下でFileを選択するとbody に imgタグがappendされる
	<input type="file" id="files" />
	</body>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="./script.js"></script>
	<script>

	window.onload = function(){ if( window.File ) {main(); } else {alert('the file apis are not fully supported in this browser.'); } }
	</script>
	</html>
	*/

	/***************** JavaScript **************************/

	var main = function main(){
	///////////////////////////////////////////////////////////////

	function handleFileSelect(evt) {
	//fileList API は以下で設定
	//イベントオブジェクトの中にふくまれている！！
	var files = evt.target.files; // FileList object
	//FileReaderとか　File とかの APIは windowオブジェクトが親になる
	var reader = new FileReader();
	//reader.onload で画像読み込み後にこの以下の処理を行うように指定
	reader.onload = function(e) {
	alert("hoge");
	$("body").append('<img src="'+ e.target.result +'"/>');
	};

	for(var i = 0; i < files.length; i++ ){
	reader.readAsDataURL(files[i]);
	}
	}

	$('#files').bind('change', handleFileSelect);

	///////////////////////////////////////////////////////////////
	};