[JS] 파일API 파일 쓰기

Programming/JS 2014. 7. 18. 17:44
반응형
HTML5 + Java script에서 FILE Api를 이용해 Directory와 File을 생성하는 코드
 
<!DOCTYPE html>
<meta charset="utf-8"> 
<html lang="en">
<head>

	<script type='text/javascript'>
		function log(str)
		{
			var logConsole = document.getElementById("debugLog");
			logConsole.innerText += str + "\n";
			//log가 찍힌 뒤 스크롤 맨 밑으로 이동
			logConsole.scrollTop = logConsole.scrollHeight;
		}

		console.log = log;
		function createFileSystem(){
			window.requestFileSystem  = window.requestFileSystem || window.webkitRequestFileSystem;

			var fileSystem = window.requestFileSystem(window.PERSISTENT, 1024*1024, createdFS, showerr);
		};
			
		function createdFS(e)
		{
			fs = e.root;
		}
		function showerr(e)
		{
			log( "Error : " + e.message );
		}

		navigator.webkitPersistentStorage.requestQuota(1024*1024, createFileSystem, showerr);

		function createFile()
		{
			if(!fs)
			{
				log("Error : can't open FS");
				return;
			}

			var name = document.getElementById("fileName").value;
			fs.getFile(name, {create: true, exclusive: false}, successCreate, showerr);
		}
		
		function createDir()
		{
			if(!fs)
			{
				log("Error : can't open FS");
				return;
			}
			var name = document.getElementById("fileName").value;
			fs.getDirectory(name, {create: true, exclusive: false}, successCreate, showerr);
		}

		function successCreate(e)
		{
			log("file name : " + e.name);
			log("file path : " + e.fullPath)
		}

		function clearLog()
		{
			var logConsole = document.getElementById("debugLog");
			logConsole.innerText = "";
		}
	</script>
</head>
<body>

<span>
	<input type="text" id="fileName" />
	<input type="button" value="dir생성" onclick="createDir()" />
	<input type="button" value="file생성" onclick="createFile()" />
</span>

<div id="fileList">
</div>

<div id="debugArea" style="margin-top:100px;">
	<span> Log <input type="button" value="clear" id="clearLog" onclick="clearLog()" /></span>
	<div id="debugLog" style="border:1px;overflow-y:scroll;height:200px"></div>
</div>
</body>
</html>
 

반응형

댓글을 달아 주세요