이미지 업로드전 미리보기

Why?

• 사용자가 프로필 사진을 선택해서 서버에 전송하기 전에 해당 이미지를 미리 보여주고 싶을 경우에 사용!
• 사용자가 자기가 무슨 사진을 올렸는지 확인할 수 있도록!

How?

• input 태그의 type이 file인 경우에 사용자가 파일을 선택하면 onchange 이벤트가 발생한다!
• onchage이벤트가 일어났을 때 실행되는 함수에서 이벤트가 일어난 객체(파일이 변경된 input)을 가져온 후에 files 객체로 실제 파일의 객체를 뽑아온다.
• 뽑아온 파일을 filereader로 읽어서 img 태그의 src 값에 넣을 수 있는 경로로 변경시킨 후에 미리보기 이미지 jquery 등을 이용하여 attribute 값을 변경시켜준다!!
• +++ 추가로 사용자에게 지정된 크기의 이미지만들 보여주고 싶으면 src에 이미지 경로를 넣어주면서 css 값을 jquery 등으로 변경시켜준다!!

 

예시

...
<!--미리보기 img->
<img src="../static/style/dog.jpg" id="image">
...
<!--file input-->
<input onchange="change_preview(this)" id="img-file" accept="image/*">

// 이미지 미리보기 이벤트
function change_preview(a) {
    let file = a.files[0]
    let reader = new FileReader();
    reader.onload = function (e) {
        $("#image").attr("src", e.target.result);
        $("#image").css("width", "400");
        $("#image").css("height", "450");
    }
    reader.readAsDataURL(file);
}