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



Yorum Yap




Yorumlar: