웹에서 File 선택하기(파일 열기 대화상자 or 파일 드래그&드랍)

웹에서 파일을 선택하기 위해서는 사용자의 행위가 필요한데, 파일 열기 대화상자를 통해 파일을 선택해 주거나 파일을 드래그해서 웹브라우저에 드랍해줘야합니다.

먼저 파일을 드랍해서 떨굴 영역을 마련해 줍니다.


    
    
        
            이곳을 클릭하거나 
이곳에 파일을 드래그 하세요.

.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);
    }                
};

답글 남기기 응답 취소