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://duckgugong.tistory.com/269
'Study > JavaScript' 카테고리의 다른 글
[JavaScript] 자식창에서 부모창 제어 (0) | 2023.08.23 |
---|---|
[JavaScript] 문자열을 객체의 key로 하여 value에 접근하는 방법 (0) | 2023.04.21 |
[JavaScript] Array.fill 과 Array.from 차이? (0) | 2022.08.30 |
[JavaScript] 정규 표현식, 정규식 (0) | 2022.06.16 |
[JavaScript] 논리 연산자로 변수에 값 할당하기 (0) | 2021.10.22 |