[Javascript] 파일업로드 관련 유효성 체크하기

웹개발시 자주 쓰이는 파일업로드 input="file" 태그에서 유효성 체크하는 소스를 간략히 정리하고 소개해보았다.

 

아래의 백엔드 PHP 문법 코드가 살짝 가미되어 있는데 이부분은 ASP 나 JSP 등의 기타 백엔드 개발언어로 충분히 응용하면 될것이다.

 

<form name="f1" method="post" enctype="multipart/form-data">
 
      <div class="input-wrap w-btn iw-file">
        <input type="text" name="userfile1_txt" class="input-base" readonly id="input-file-path" />
        <span class="btn-base tp3"><a href="#">파일 찾기</a></span>
        <input type="file" name="userfile1" class="addFile" onchange="javascript:document.getElementById('input-file-path').value = this.value;" />
      </div>
<?
if ($filename1) {
?>
      <span class="valid">기존 파일 : <a href='../inc/download.php?fn=<?=$filename1?>&dir=recruit&ext=1'><?=$origin_filename1?></a> 
       &nbsp; <input type="checkbox" id="picDel1" name="picDel1" value="y"><label for="picDel1">삭제</label>
      </span> 
        <input type=hidden name="file1_old" value="<?=$filename1?>">
        <input type=hidden name="file1size_old" value="<?=$filesize1?>">
        <input type=hidden name="origin_file1_old" value="<?=$origin_filename1?>">
<?
}
?>
 
</form>
 
 
<script>
function fileChk() {
    var form = document.f1;
    var str = form.file1_old;
    if(typeof str == "undefined" || str == null || str == "")
    {
        if (form.userfile1_txt.value=="") {
            alert("파일찾기를 눌러 제출서류를 첨부해 주십시오. \n\n[허용파일 : doc, docx, hwp, zip파일]");
            form.userfile1_txt.focus();
            return;
        }
 
    } 
 
    form.action = "업로드처리파일";
    form.submit();
 
}
</script>