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

+ Recent posts