[jQuery] 파일 첨부 시 미리보기, 파일 확장자명 판별하기

 

 

 

html 코드를 사용하여 파일을 첨부할 때 보통 input type = "file"를 사용하여 파일을 첨부합니다.

이때 파일만 첨부되고 어떤 파일이 첨부 되었는지 알 수가 없습니다.

이미지 미리보기가 된다면 어떤 파일을 첨부했는지 쉽게 알 수 있을 것입니다.

 

이번 글은 첨부한 이미지파일을 미리 볼 수 있는 미리 보기 기능에 대해 작성해 보겠습니다.

 

 

반응형

 

---

 

작업할 내용

 

 

이미지 미리보기 완성

 

 

아래 파일 선택을 눌러서 파일을 첨부하면 위쪽에 미리 보기로 첨부한 이미지가 올라가게 됩니다.

첨부한 파일명은 파일 선택 바로 옆에 표기되게 되고,

오른쪽의 첨부하기 버튼을 누르면 파일을 저장하게 됩니다.

 

 

이미지 미리 보기 코드

 

728x90

 

가끔 페이지를 공격하여 정보를 빼내가려는 사람들은 파일 첨부기능에 자신들의 코드가 작성된 파일을 첨부하기도 합니다.

이럴 때는 파일의 확장자를 판별하여 이미지 확장자가 아니라면 첨부가 되지 않도록 해주는 것이 좋습니다.

 

이미지 파일이 아닌 다른 확장자의 파일을 넣으면 경고창을 띄우게 하는 기능을 추가하겠습니다.

 

파일을 첨부했을 때 $("#form_file"). on("change", function(e)를 통해서 파일이 들어왔음을 감지하고,

$("#preview"). attr("src", e.target.result); 를 통해서 preview라는 이미지태그의 src값에 첨부한 파일값을 넣어서 이미지 태그에 첨부한 파일을 띄워서 보여주게 됩니다.

 

 

파일 확장자 판별

 

코드 중 isImageFile()라는 함수를 통해 파일 확장자를 판단하여 이미지 파일이 아니라면 경고창을 띄우게 됩니다.

 

function isImageFile(file) {
  // 파일명에서 확장자를 가져옴
  var ext = file.name.split(".").pop().toLowerCase(); 
  return ($.inArray(ext, ["jpg", "jpeg", "gif", "png"]) === -1) ? false : true;
}

 

file.name를 통해서 파일의 이름을 가져오고,

파일이름에서 "."으로 텍스트를 구분하여 "." 이후의 텍스트를 가져와 파일 확장자 명을 판별합니다.

 

 

 

전체코드

 

css를 제외한 전체코드를 통해 코드 내용을 확인해 보고, 직접 적용해 보며 응용해 보시길 바랍니다.

 

<div class="subtit001">
  <div class="text003">이미지 첨부</div>
  <img id="preview" style="max-width: 300px;">
  <input type="file" name="file" id="form_file" value="" />
</div>

<div class="btn_001">
  <span class="btn_submit" onclick="form_chk();">첨부하기</span>
</div>

 

$(document).ready(function() {
  $("#form_file").on("change", function(e) {
    var file = e.target.files[0];
    if(isImageFile(file)) {
      var reader = new FileReader(); 
      reader.onload = function(e) {
        $("#preview").attr("src", e.target.result);
      }
      reader.readAsDataURL(file);
    } else {
      alert("이미지 파일만 첨부 가능합니다.");
      $("#form_file").val("");
      $("#preview").attr("src", "");
    }
  });
});

// 업로드 파일 이미지 파일인지 확인
function isImageFile(file) {
  // 파일명에서 확장자를 가져옴
  var ext = file.name.split(".").pop().toLowerCase(); 
  return ($.inArray(ext, ["jpg", "jpeg", "gif", "png"]) === -1) ? false : true;
}

function form_chk() {
  var file_val = $("#form_file").val();

  if(file_val) {
    //db에 파일 첨부 처리
    alert("이미지가 첨부되었습니다");
  } else {
    alert("첨부된 이미지가 없습니다.");
  }
}

 

 

---

 

결론

 

이 포스팅에서는 이미지 파일을 첨부했을 때,

첨부한 이미지를 미리 페이지에 띄워서 확인할 수 있는 기능에 대해서 알아보았습니다.

 

이 기능을 활용하면 웹페이지를 이용하는 사용자는 자신이 첨부한 이미지가 무엇인지,

확실하게 알게 되어 잘못된 파일을 첨부하는 일이 줄어들 것입니다.

 

이 기능을 활용하여 사용자에게 좀 더 친화적인 페이지로 진화시켜 가길 바랍니다.