HTML5의 DOM으로 추가된 File API를 사용해서 웹 컨텐츠가 사용자에게 로컬 파일을 선택한 후 파일의 컨텐츠를 읽도록 요청가능.
<input>태그나 드래긍 앤 드랍으로도 사용
선택한 파일에 접근
하나의 파일만 선택한 경우, 리스트의 첫 번째 파일만 고려하면됨
<input type="file" id="input">const selectedFile = document.getElementById('input').files[0];
change 이벤트를 통해 FileList에 접근할수있다.
단, 아래와같이 EventTarget.addEventListner()를 사용해야한다.
<input type="file" id="input" onchange="handleFiles(this.files)">const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
const fileList = this.files; /* 이제 파일 리스트로 작업할 수 있습니다 */
}*handleFies() 함수 자체가 이벤트 핸들러임.
선택한 파일에 대한 정보 얻기
DOM에 의해 제공된 FileList객체의 lenght만큼 순환하여 정보를 얻을 수 있음.
const numFiles = files.length; //FileList의 길이
for (let i = 0, numFiles = files.length; i < numFiles; i++) { //for문으로 FileList 순회
const file = files[i];
..
}아래 3가지 속성으로 file의 정보를 얻음
- name : 파일명 (경로X)
- size : 파일 단위의 크기
- type : 파일의 MIME타입
size 속성의 사용예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>File(s) size</title>
<script>
function updateSize() {
let nBytes = 0,
oFiles = document.getElementById("uploadInput").files,
nFiles = oFiles.length;
for (let nFileId = 0; nFileId < nFiles; nFileId++) {
nBytes += oFiles[nFileId].size;
}
let sOutput = nBytes + " bytes";
// multiples approximation을 위한 선택적 코드
for (let aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
}
// 선택적 코드의 끝
document.getElementById("fileNum").innerHTML = nFiles;
document.getElementById("fileSize").innerHTML = sOutput;
}
</script>
</head>
<body onload="updateSize();">
<form name="uploadForm">
<p><input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple> selected files: <span id="fileNum">0</span>; total size: <span id="fileSize">0</span></p>
<p><input type="submit" value="Send file"></p>
</form>
</body>
</html>'웹표준 > Offline & storage' 카테고리의 다른 글
| 3. WHATWG 클라이언트 측 세션 및 영구 저장소 (0) | 2020.04.15 |
|---|---|
| 2. 온라인/오프라인 이벤트 (1) | 2020.04.15 |
| 1. 애플리케이션 캐시 (0) | 2020.04.15 |