Cara Membuat Upload Preview dengan Javascript

Halo teman teman pada kesempatan kali ini saya akan menjelaskan tentang Cara Membuat Upload Preview dengan Javascript, pada kasus kali ini kita akan mencoba menampilkan sebuah gambar sebelum di upload, yaitu dengan menggunakan javascript, nah nanti ketika kita ingin mengupload sebuah file maka gambar yang akan kita upload akan muncul secara otomatis.

Untuk Cara Membuat Upload Preview dengan Javascript, kita akan menggunakan HTML5 sebagai strukturnya, oke teman teman kita langsung saja masuk ke study casenya,

Silahkan teman teman simpan script dibawah ini dengan nama index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Cara Membuat upload preview dengan javascript</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <script>
            function tampilkanPreview(gambar,idpreview){
                var gb = gambar.files;
                for (var i = 0; i < gb.length; i++){
                    var gbPreview = gb[i];
                    var imageType = /image.*/;
                    var preview=document.getElementById(idpreview);            
                    var reader = new FileReader();
                    
                    if (gbPreview.type.match(imageType)) {
                        preview.file = gbPreview;
                        reader.onload = (function(element) { 
                            return function(e) { 
                                element.src = e.target.result; 
                            }; 
                        })(preview);
                        reader.readAsDataURL(gbPreview);
                    }else{
                        alert("file yang anda upload tidak sesuai. Khusus mengunakan image.");
                    }
                   
                }    
            }
        </script>
        <style type="text/css">
            form{width: 310px; margin: auto;} 
            .input{background: #F0FFF3; color: black; cursor: pointer;}
        </style>
    </head>
    <body>
        <form id="myForm" action="" method="get">
            <input type="file" class="input" accept="image/*"  onchange="tampilkanPreview(this,'preview')" />
            <input type="submit" value="Upload" /><br/>
            <!--untuk menampilkan file gambar yang telah di upload-->
            <img id="preview" src="" alt="" width="200px"/>
        </form>
    </body>
</html>

Berikutnya silahkan di save, dan coba dijalan kan pada browser nya maka akan muncul seperti dibawah ini,..

Oke teman teman cukup mudah bukan, Cara Membuat Upload Preview dengan Javascript nya, sekian dulu tutorial saya kali ini tentang Cara Membuat Upload Preview dengan Javascript.

Semoga bermanfaat, Terimakasih