728x90
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="profile">
<h3>upload profile</h3>
<div class="profile-photo">
<img src="다운로드.jpg">
</div>
<div class="photo-upload">
<label for="upload">Upload Photo</label>
<input type="file" id="upload">
</div>
</div>
<script src="cl.js"></script>
</body>
</html>
$('#upload').change(function(e){
let n=URL.createObjectURL(e.target.files[0]);
$('.profile-photo img').attr('src',n);
})
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.profile{
background-color: whitesmoke;
width: 300px;
text-align: center;
padding: 30px;
box-shadow: 0 0 15px gainsboro;
}
.profile h3{
text-transform: capitalize;
}
.photo-upload input[type=file]{
display: none;
}
.photo-upload label{
background-color: tomato;
color: white;
display: block;
padding: 10px;
}
.profile-photo img{
width: 200px;
border-radius: 50%;
}
.photo-upload{
margin-top: 20px;
}
728x90
'Library > Jquery' 카테고리의 다른 글
[Jquery] Scroll-top, header fix / addclass, removeclass (0) | 2024.04.16 |
---|---|
[Jquery] Modal 팝업 (0) | 2024.04.16 |
[Jquery] 포인트정리! (0) | 2024.04.11 |
[Jquery] .html .trigger / .filter (0) | 2024.04.11 |
[Jquery] form 태그 선택자 (0) | 2024.04.11 |