[Javascript/File] Html5에서 File Upload 전에 파일 정보 체크하기

# 파일 업로드 전에 파일 정보 체크하기.

파일 업로드 시에는 WAS나 자체 내 파일 문제로 에러가 발생 될 수 있다. 이러한 에러처리를 하는 것은 당연하다.

하지만, 유저 입장에서 간단하게 파일을 체크하여, 되는지 안되는지를 아는 것이 더 중요한 것으로 판단된다.

그래서 파일을 올릴 때, 변화여부를 체크하여 파일정보를 볼 수 있게 해야한다.

var CommonFunctionModule = (function() {

 //File Info & Validation Check 

var checkFileBeforeUpload=function(htmlTagId){

var files = document.getElementById(htmlTagId);

// binds to onchange event of the input field

files.addEventListener('change', function() {

//this.files[0].size gets the size of your file.

console.log("files", this.files.length);

for(var i=0;i<this.files.length;i++){

console.log("size", this.files[i].size);

console.log("size", this.files[i].name);

console.log("size", this.files[i].type);

console.log("size", this.files[i].lastModifiedDate);

}

});

}

return {

selectDomCopy : selectDomCopy,

checkFileBeforeUpload : checkFileBeforeUpload

}

})();

모듈 패턴을 적용시켰으며, 필요한 것들을 이렇게 선언하여 어디서든 재사용 할 수 있게 만들어줘야 한다. 

참조 : http://felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the-file-size/