JS - Laravel Sürükle Bırak İle Resim Önizleme
Js ve Html kullanarak sürükle bırak yöntemi ile resimleri nasıl önizleme yapabiliriz buna bakacağız. Laravelde de çoklu resim yüklerken bu yöntemi kullanabilirsiniz.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sürükle ve Bırak Resim Önizleme</title>
<style>
#drop-area {
border: 2px dashed #ccc;
padding: 20px;
text-align: center;
}
#image-preview {
display: flex;
flex-wrap: wrap;
}
.preview-container {
margin: 10px;
}
.preview-image {
max-width: 100px;
max-height: 100px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="drop-area" ondrop="dropHandler(event)" ondragover="dragOverHandler(event)">
Sürükleyip bırakın veya tıklayarak resim seçin.
<input type="file" id="image-input" accept="image/*" style="display: none;" onchange="previewImage()" multiple>
</div>
<div id="image-preview"></div>
<script>
function dragOverHandler(event) {
event.preventDefault();
event.dataTransfer.dropEffect = 'copy';
document.getElementById('drop-area').style.border = '2px dashed #aaa';
}
function dropHandler(event) {
event.preventDefault();
document.getElementById('drop-area').style.border = '2px dashed #ccc';
var input = document.getElementById('image-input');
input.files = event.dataTransfer.files;
previewImage();
}
function previewImage() {
var input = document.getElementById('image-input');
var previewContainer = document.getElementById('image-preview');
var files = input.files;
previewContainer.innerHTML = '';
for (var i = 0; i < files.length; i++) {
var file = files[i];
var reader = new FileReader();
reader.onload = function (e) {
var previewDiv = document.createElement('div');
previewDiv.className = 'preview-container';
var previewImage = document.createElement('img');
previewImage.className = 'preview-image';
previewImage.src = e.target.result;
previewDiv.appendChild(previewImage);
previewContainer.appendChild(previewDiv);
};
reader.readAsDataURL(file);
}
}
</script>
</body>
</html>
Bu örnekte, "drop-area" adlı bir div, dosyaların sürüklendiği ve bırakıldığı alandır. dragOverHandler
fonksiyonu, sürükleme işlemi sırasında çalışır ve sürükleme işleminin izin verildiğini belirtir. dropHandler
fonksiyonu ise dosyalar bırakıldığında çağrılır ve dosyaları seçilen dosya girişine atan previewImage
fonksiyonunu çağırır.
E-Bültenime Abone Ol
Anahtar Kelimeler: sürükle bırak
Yazan: Emre TENİK
Bu yazı: 298 kez okundu