File API는 웹 애플리케이션이 로컬 파일에 프로그램적으로 접근할 수 있게한다. 파일을 업로드하기 위해 웹 사이트의 특정 영역으로 파일을 드래그하거나 <input> 요소로부터 전달받은 파일에 접근하여 파일의 이름, 경로, 크기, 종류 등에 대한 정보를 취득할 수 있다. 물론, 읽기전용 상태로접근된 것이기 때문에 실제 파일의 물리적 변형은 일어나지 않는다. 그러나
4.3.2 Drag and Drop에서 언급했듯이 <canvas>요소를 응용하면 파일을 서버에 업로드하지 않고도 포멧을 변환하거나, 변조한 후 서버로 업로드 하는일이 가능하다. 또한 FileReader개체를 이용하면 바이너리 데이터를 분석하여JPEG 파일의EXIF 정보, MP3의ID3 태그를 가져오는 등의 작업을 수행할 수 있다.
출처 : http://html5.firejune.com/demo/file.html
<!DOCTYPE html> <html> <head> <title>File API Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <h1>File API Demo</h1> <h3>파일(들)을 선택하세요.</h3> <!-- multiple 속성을 이용하면 파일을 다중으로 업로드 할 수 있음 --> <input id="files-upload" type="file" multiple>
<h3>Uploaded files</h3> <ul id="file-list"> <li class="no-items">(파일이 선택되 않음)</li> </ul> <script> var filesUpload = document.getElementById("files-upload"), fileList = document.getElementById("file-list");
function traverseFiles (files) { var li, file, fileInfo; fileList.innerHTML = "";
for (var i=0, il=files.length; i<il; i++) { li = document.createElement("li"); file = files[i]; fileInfo = "<div><strong>Name:</strong> " + file.name + "</div>"; fileInfo += "<div><strong>Size:</strong> " + file.size + " bytes</div>"; fileInfo += "<div><strong>Type:</strong> " + file.type + "</div>"; li.innerHTML = fileInfo; fileList.appendChild(li); }; };
filesUpload.onchange = function () { traverseFiles(this.files); }; </script> </body> </html> |
