[JavaScript, JQuery] 파일 업로드 커스텀 버튼 사용하기

 

 

input 태그는 diplay:none 으로 해서 안 보이게 만든다.

// html 
<img id="profileImg" src="#" alt="" >
<button id="uploadProfileBtn" type="button">이미지 업로드</button>
<input id="fileUpload" type="file" style="display: none"/>

 

 

 

1. uploadProfileBtn 버튼을 클릭하면 fileUpload input이 클릭됨

2. fileUpload로 파일이 업로드 되면 previewImage()를 실행시킴

// JQuery
$("#uploadProfileBtn").on("click", function() {
  $("#fileUpload").click();
});
$("#fileUpload").change(function () {
  previewImage();
});

 

 

 

fileUpload에서 업로드한 파일을 가져와 profileImg에 넣는다.

function previewImage() {
    var preview = new FileReader();
    preview.onload = function (e) {
        $("#profileImg").attr("src", e.target.result);
    };
    preview.readAsDataURL($("#fileUpload")[0].files[0]);
};

 

 

 

 

 

참고 사이트

https://soomti.tistory.com/7

https://duckgugong.tistory.com/269