<body>
<div class="container">
<label for="input-img" class="preview">
<i class="fas fa-cloud-upload-alt"></i>
<span>Upload to preview image</span>
</label>
<input type="file" hidden id="input-img" />
</div>
<script src="app.js"></script>
</body>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
height: 100vh;
overflow: hidden;
background-image: linear-gradient(45deg, #3575d1, #7d4ed4);
}
.container {
width: 500px;
margin: 120px auto;
}
.preview {
border: 2px dashed #fff;
width: 100%;
height: 350px;
color: white;
font-size: 22px;
position: relative;
border-radius: 6px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
cursor: pointer;
}
.preview i {
font-size: 60px;
margin-bottom: 20px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
const inputImg = document.querySelector('#input-img')
inputImg.addEventListener('change', (e) => {
let file = e.target.files[0]
if (!file) return
let img = document.createElement('img')
img.src = URL.createObjectURL(file)
document.querySelector('.preview').appendChild(img)
})
LỘ TRÌNH LÊN FULLSTACK, trọn bộ serial course Pro HTML,CSS,JAVASCRIPT MIỄN PHÍ :
HTML : HTML căn bản cho người mới bắt đầu
CSS : CSS căn bản cho người mới bắt đầu
JS: Javascript cho người mới bắt đầu
