Tutorial Cara Preview Gambar Sebelum Diupload

Kadang ada user yang ingin mengupload gambar namun sebelum diproses atau disimpan pada database atau storage server ingin di preview terlebih dahulu. Hal ini mungkin akan sangat bermanfaat jika gambar yang diupload banyak sehingga perlu preview terlebih dahulu.

Di jQuery ada cara yang sangat mudah. Berikut adalah cara melakukannya.

Pertama siapkan file HTML lalu buat seperti ini.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<input type="file" multiple id="uploadImage">
<div class="div_image"></div>
</body>
</html>

Lalu kita tambahkan javascript seperti kode berikut.

$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src',event.target.result).appendTo(placeToInsertImagePreview);
                }

                reader.readAsDataURL(input.files[i]);
            }
        }

    };

    $('input#uploadImage').on('change', function() {
        imagesPreview(this, '.div_image');
    });
});

Dan hasilnya bisa temen-temen coba di sini: https://jsfiddle.net/adiputra/4nmLqfxk/2/

Pilih beberapa gambar lalu temen-temen akan melihat gambar langsung di preview.

Menarik ya.

Selamat mencoba Tutorial Cara Preview Gambar Sebelum Diupload 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: