이미지 첨부 미리보기 파일이미지 만들기 html,css, js

html (구조만 가져가고 나머지는 마음대로 커스텀 가능)

        <div class="thumnail">
        <div id="image_container">
        </div>
        <div class="ptchange">
        <label for="image"><img src="images/sub/join01.png" class="photo_change" />
        <p>Reshoot</p>
        </label>
        </div>
        <input type="file" id="image" accept="image/*" onchange="setThumbnail(event);" capture="camera" />
        </div>

css (구조만 가져가고 나머지는 마음대로 커스텀 가능)

#image_container{overflow: hidden;width: 250px; height: 170px; border-radius: 8px;margin-right: 20px;background: url('images/sub/join02.jpg')no-repeat; background-size:100% 100%; position: relative;}
#image_container img{ width: 100%; height: 100%; position: absolute;top: 50%;transform: translate(-50%, -50%);left: 50%;right: 0;margin: 0 auto;}
.thumnail {text-align: center;position: relative;margin-top: 30px;  display: flex; justify-content: center;}
.thumnail input[type=file]{position:absolute;width:0;height:0;padding:0;overflow:hidden;border:0}
.thumnail::after{display: block; content: ''; clear: both;}
.ptchange{width: 170px; height: 170px; border-radius: 8px; border: 1px solid #ddd; text-align: center;padding-top: 45px;}
.ptchange p{  font-family: 'Montserrat', sans-serif;font-weight: 600; color:#999; margin: 0;margin-top: 10px;}

 

js

 

 

<script>
//이미지
	function setThumbnail(event) {
		var reader = new FileReader();
		reader.onload = function(event) {
			var img = document.createElement("img");
			img.setAttribute("src", event.target.result);
			document.querySelector("div#image_container").appendChild(img);
		};
		reader.readAsDataURL(event.target.files[0]);
	}
</script>