<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Resim Önizleme Aracı</h2>
<div id="alert-message"></div>
<label class="image_input_container">
<input type="file" name="image" id="fileInput" accept="image/jpeg, image/png, image/webp, image/gif, image/bmp">
</label>
<p id="sonuc" class="margin-top-10"></p>
<img id="img-area" class="thumbnail margin-top-20" alt="Resim Önizleme Alanı"
src="https://cdn1.ntv.com.tr/gorsel/ZLEPpp4pa06sFdNX2uJ63A.jpg?width=1200&mode=crop&scale=both"
width="100%" />
</div>
</div>
input[type="file"]::file-selector-button{ /* the button to select file */
background-color: #ffffff;
margin: 0;
padding: 1.2rem;
border: 0;
margin-right:8px;
border-color: #000000;
border-right-width: 1px;
border-style: solid;
font-weight:bold;
color: rgb(255,255,255);
height: 100%;
background-color:#337AB7;
}
input[type="file"]::file-selector-button:hover{
background-color: #a7a7a7;
}
input[type="file"]::file-selector-button:active{
background-color: #ffffff;
}
input[type="file"]{
width: 100%;
}
.image_input_container{
background-color: #ffffff;
display:flex;
margin: 0.5rem;
padding: 0;
border: 0;
border-color: #000000;
border-width: 1px;
border-style: solid;
max-width: 100%;
color:red;
}
body {
background-color:#E0E0E0 ;
}
$(document).ready(function(){
// Kabul edilen dosya tipleri
const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/webp', 'image/gif', 'image/bmp'];
// Dosya seçildiğinde tetiklenir
$('#fileInput').on('change', function(e){
// Önceki uyarıları temizle
$('#alert-message').empty();
$('#img-area').attr('src', 'https://cdn1.ntv.com.tr/gorsel/ZLEPpp4pa06sFdNX2uJ63A.jpg?width=1200&mode=crop&scale=both'); // Varsayılan resmi geri yükle
$('#sonuc').text('');
// Yüklenen dosyayı al
const file = e.target.files[0];
if (file) {
// 1. Dosya Tipi Kontrolü
if (ALLOWED_TYPES.includes(file.type)) {
// Dosya adını göster
$("#sonuc").text('Seçilen Dosya: ' + file.name);
// 2. FileReader ile resmi oku ve önizle
const reader = new FileReader();
reader.onload = function(event) {
// event.target.result, resmin Base64 formatındaki URL'sidir.
// Bu URL, resmi tarayıcıda göstermemizi sağlar.
$('#img-area').attr('src', event.target.result);
};
// Dosyayı oku
reader.readAsDataURL(file);
} else {
// Hata: Resim dosyası değil
const errorMessage = `
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Hata!</strong> Lütfen sadece JPG, PNG, WEBP, GIF veya BMP uzantılı bir resim dosyası seçiniz. (Seçilen tip: ${file.type})
</div>`;
$('#alert-message').html(errorMessage);
$("#sonuc").text('Dosya Tipi Geçersiz!');
// Hata durumunda input'u temizlemek isteyebilirsiniz.
$(this).val('');
}
} else {
// Dosya seçimi iptal edildi
$("#sonuc").text('Dosya seçimi iptal edildi.');
}
});
});
