زمانی که می خواهیم یک تصویر را آپلود کنیم بهتر است بعد از انتخاب تصویر توسط کاربر یک پیش نمایش از تصویر انتخاب شده را به کاربر نمایش دهیم، از جمله مزایای پیاده سازی این قابلیت می توان به موارد زیر اشاره کرد.
- کاربر ممکن است یک تصویر خصوصی را به اشتباه انتخاب کرده باشد و قبل از آپلود می تواند تصویری که انتخاب کرده است را ببینید و در نتیجه حریم خصوصی کاربر کاملا حفظ می شود.
- چنانچه کاربر در انتخاب تصویر اشتباه کرده باشد قبل از آپلود کردن، مطلع می شود و در نتیجه عملیات کمتری را سمت بک اند می فرستد.
- کاربر با دیدن این قابلیت حس بهتری را تجربه می کند و در نتیجه تجربه کاربری بهتری را برای کاربر فراهم کرده ایم.
مهمترین بخش آموزشی برای این کار استفاده از FileReader در جاوااسکریپت می باشد که در ادامه نحوه استفاده و کار با آن را مشاهده خواهید کرد.
بخش HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Preview</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h2>Upload an Image</h2>
<input type="file" id="imageInput">
<div id="previewContainer">
<img id="imagePreview" src="" alt="Image Preview" style="display:none;"/>
</div>
</div>
<script src="script.js"></script>
</body>
</html>بخش CSS
.container {
text-align: center;
margin-top: 50px;
}
#previewContainer {
margin-top: 20px;
}
#imagePreview {
max-width: 100%;
height: auto;
border: 2px solid #ddd;
padding: 10px;
}بخش JavaScript
const imageInput = document.getElementById('imageInput');
const imagePreview = document.getElementById('imagePreview');
imageInput.addEventListener('change', function(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
imagePreview.src = e.target.result;
imagePreview.style.display = 'block';
}
reader.readAsDataURL(file);
} else {
imagePreview.src = '';
imagePreview.style.display = 'none';
}
});
دیدگاهتان را بنویسید