웹에서 파일을 선택하기 위해서는 사용자의 행위가 필요한데, 파일 열기 대화상자를 통해 파일을 선택해 주거나 파일을 드래그해서 웹브라우저에 드랍해줘야합니다.
먼저 파일을 드랍해서 떨굴 영역을 마련해 줍니다.
이곳에 파일을 드래그 하세요.
.file-zone에 대한 div 영역이 파일을 드랍해서 떨굴 영역입니다.
JS 코드는 다음과 같습니다.
fileZone.addEventListener("drop", (event) => {
const files = event.dataTransfer.files;
const file = files[0];
if(file) {
processFile(file);
}
event.preventDefault();
});
fileZone.addEventListener("dragover", (event) => {
event.preventDefault();
});
processFile은 떨군 파일을 처리하는 함수인데요. 예를 들면 다음과 같습니다.
function processFile(file) {
const name = file.name;
const size = file.size;
const reader = new FileReader();
reader.onload = function() {
const aBuf = this.result; // ArrayBuffer
//const dView = new DataView(aBuf);
//const validFlag = dView.getUint8(0);
//const numRecords = dView.getInt32(4, true);
const MD5 = CryptoJS.MD5(aBuf).toString();
const SHA256 = CryptoJS.SHA256(aBuf).toString();
gwcMessage(`Size ${size} bytes
MD5 ${MD5}
SHA256 ${SHA256}`);
};
const blob = file.slice(0, size);
reader.readAsArrayBuffer(blob);
}
이제 파일 열기 대화상자를 통해 file을 선택해 처리해보겠습니다. 앞서 HTML 코드를 보면 file 타입의 input tag가 있는데 이 DOM 요소를 통해 파일 열기 대화상자를 표시합니다. 이 DOM 요소의 display는 none으로 해서 화면에 보이지 않도록 하는게 일반적입니다.
JS 코드는 다음과 같습니다.
const fileZone = document.querySelector(".file-zone");
fileZone.addEventListener("click", () => {
document.querySelector("input").click();
});
document.querySelector("input").onchange = function() {
const file = this.files[0];
if(file) {
processFile(file);
}
};