Предварительный просмотр изображений перед загрузкой на HTML, CSS и JS
See the Pen Предварительный просмотр изображения перед загрузкой by SATAMAX.RU (@lvpzgyft-the-typescripter) on CodePen.
HTML
<div class="form">
<h2>Предварительный просмотр изображения перед загрузкой</h2>
<div class="grid">
<div class="form-element">
<input type="file" id="file-1" accept="image/*">
<label for="file-1" id="file-1-preview">
<img src="https://bit.ly/3ubuq5o" alt="">
<div>
<span>+</span>
</div>
</label>
</div>
</div>
</div>
CSS
* {
margin:0px;
padding:0px;
box-sizing:border-box;
}
body {
font-family:"Raleway",sans-serif;
background:#0C1321;
}
.form {
margin:80px 0px 20px;
padding:0px 50px;
}
.form h2 {
text-align:center;
color:#acacac;
font-size:40px;
font-weight:400;
}
.form .grid {
margin-top:50px;
display:flex;
justify-content:space-around;
flex-wrap:wrap;
gap:20px;
}
.form .grid .form-element {
width:200px;
height:200px;
cursor: pointer;
box-shadow:0px 0px 20px 5px rgba(100,100,100,0.1);
}
.form .grid .form-element input {
display:none;
}
.form .grid .form-element img {
width:100%;
cursor: pointer;
height:100%;
object-fit:cover;
}
.form .grid .form-element div {
position:relative;
height:40px;
cursor: pointer;
margin-top:-40px;
background:rgba(0,0,0,0.5);
text-align:center;
line-height:40px;
font-size:13px;
color:#f5f5f5;
font-weight:600;
}
.form .grid .form-element div span {
font-size:40px;
}
JS
function previewBeforeUpload(id){ document.querySelector("#"+id).addEventListener("change",function(e){
if(e.target.files.length == 0){
return;
}
let file = e.target.files[0];
let url = URL.createObjectURL(file);
document.querySelector("#"+id+"-preview div").innerText = file.name;
document.querySelector("#"+id+"-preview img").src = url;
});
}
previewBeforeUpload("file-1");
// Telegram @FrontendPortal