--> Skip to main content
Home Pemrograman Web Select dan Preview Multiple Image dengan Jquery

Select dan Preview Multiple Image dengan Jquery

Edisi tutorial pemrograman web kali ini akan mengdiskusikan tentang bagaimana cara untuk memilih multiple image dan preview dari gambar-gambar yang telah dipilih sebelum diupload atau disimpan pada database . Pada tutorial pemrograman web sebelumnya yang berjudul : " Menampilkan Image Sebelum Diupload ", proses penambahan / pemilihan image hanya dapat dilakukan satu-persatu, kita tidak dapat memilih gambar untuk empat gambar sekaligus.


Dalam tutorial Select dan Preview multiple image dengan Jquery, kita diizinkan memilih satu gambar ataupun lebih dari satu sekaligus , seperti yang ditunjukkan oleh Gambar.1 dibawah ini :
jquery for multiple select image
Gambar.1
Berikut ini adalah output yang akan dibuat dalam tutorial kali ini, seperti yang ditunjukkan oleh Gambar.2 dibawah ini :
Gambar.2

Langkah-langkahnya

Dalam pembuatan select dan preview multiple image, proses pembacaan file dari folder, pemilihan multiple image serta previewnya terletak pada jquery. Kode html dan css hanya sebagai pelengkap untuk memperindah tampilan.

 Langkah. 1 Buat File style.css 
root {
    display: block;
}

ul#nav { width: 12em; }

ul#nav li {
  list-style: none;
  background-color: #039;
  border-top: solid 1px #039;
  text-align: left;
  margin: 0;
}

ul#nav li a {
  display: block;
  text-decoration: none;
  padding: .25em;
  border-bottom: solid 1px #39f;
  border-right: solid 1px #39f;
}

a:link, a:visited { color: #FA8072; }
a:hover, a:active { color: #000; }

h1 {
    color: #064A7A;
    font-size: 34px;
    font-weight: bold;
    margin:28px 0 8px;
    padding: 0;
}

input[type=text] {
    width: 450px;
    height:30px;
    display: block;
    margin-bottom: 5px;
    border-radius:10px 10px 10px 10px;
}

#wrapper{
    width:1000px;
    height:680px;
    border:1px solid #cdcdcd; 
    background:#f0f3f6;
    margin:auto;
}
#header{
    width:960px;
    height:150px;
    border:1px solid #cdcdcd;
    background:#639fce;
    margin:auto;
    margin-top:5px;
}

#wrapper_konten{
    width:960px;
    height:500px;
    border:1px solid #cdcdcd;
    background:#639fce;
    margin:auto;
    margin-top:5px;
}
#left_konten{
    width:240px;
    height:485px;
    border:1px solid #cdcdcd;
    background:#e6e2e2;
    float:left;
    margin-left:5px;
    margin-top:5px;
}
#right_konten{
    width:700px;
    height:485px;
    border:1px solid #cdcdcd;
    background:#e6e2e2;
    float:left;
    margin-left:5px;
    margin-top:5px;
    margin-right:5px; 
}

#form_top_artikel
{
  background:#FA8072;
  width:85%;
  height:40px;
  margin-top:50px;
  margin-left:50px;
  margin-right:50px;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
}

#form_content_artikel
{
  background:#fff;
  width:85%;
  height:340px;
  margin-left:50px;
  margin-right:50px;
  
}

#form_bottom_artikel
{
  background:#DEB887;
  width:85%;
  height:40px;
  margin-left:50px;
  margin-right:50px;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
}

#isi_artikel{
padding-left:25px;
padding-top:25px;

}

.produksi{
     text-align: center;
}

#judul{
 padding:10px;

}
.gbr {
    float:left;
    width:100px;
    height:100px;
    position:relative;
    padding:5px;
}

 Langkah.2 Membuat file editor.php
Anda dapat menjuga mengganti ekstensi file ini menjadi editor.html. Dalam file editor.php, berisi kode untuk membentuk tampilan yang diingginkan dengan memanggil file css. Serta berisikan kode jquery untuk select dan preview multiple image.
<html>
<head>
<title>Select multiple image from file</title>
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="wrapper">
    <div id="header">
    <h1 align="center">Select multiple
    <br>image from file
    </h1>
    </div>          
    <div id="wrapper_konten">
        <div id="left_konten">
        <nav>
        <h2 align="center"> Menu </h2>
        <ul>
            <li><a href="http://ilmu-detil.blogspot.co.id/2016/01/membuat-admin-panel-agenda-dengan-php.html">Admin Panel</li>
            <li><a href="http://ilmu-detil.blogspot.co.id/2015/12/cara-membuat-tabel-dengan-jqgrid.html">Tabel Jqgrid</li>
            <li><a href="http://ilmu-detil.blogspot.co.id/2016/01/fungsi-php-untuk-cuplikan-berita.html">Cuplikan Berita</li>
            <li><a href="http://ilmu-detil.blogspot.co.id/2015/12/tutorial-bootstrap-membuat-tabel.html">Tabel Bootstrap</li>
            <li><a href="http://ilmu-detil.blogspot.co.id/2015/11/tutorial-bootstrap-newsticker-bootstrap.html">Newsticker</li>
        </ul>
        </nav>
        <img src="image/logo.jpg" style="padding-left: 20px; padding-top: 180px"  />
        </div>
        <div id="right_konten">
            <div id="form_top_artikel"> </div>
            <div id="form_content_artikel">
                <div id="isi_artikel">
                Gambar<br>
                <input id="imageupload" type="file" multiple />
    <br />
    <div id="preview-image"></div>
                <br><br>
                </div>
            </div>
            <div id="form_bottom_artikel">
            <a href="http://ilmu-detil.blogspot.com">
            <div class="produksi">Pusat Ilmu Secara Detil</div>
            </a>
            </div>
        </div>
     </div>
</div>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type="text/javascript">
 $("#imageupload").on('change', function () {
 
     //Get count of selected files
     var countFiles = $(this)[0].files.length;
 
     var imgPath = $(this)[0].value;
     var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
     var image_holder = $("#preview-image");
     image_holder.empty();
 
     if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
         if (typeof (FileReader) != "undefined") {
 
             //loop for each file selected for uploaded.
             for (var i = 0; i < countFiles; i++) {
 
                 var reader = new FileReader();
                 reader.onload = function (e) {
                     $("<img />", {
                         "src": e.target.result,
                             "class": "gbr"
                     }).appendTo(image_holder);
                 }
 
                 image_holder.show();
                 reader.readAsDataURL($(this)[0].files[i]);
             }
 
         } else {
             alert("This browser does not support FileReader.");
         }
     } else {
         alert("Pls select only images");
     }
 });
 </script>
</body>
</html>

 Pada <div id="imageupload"> akan memanggil jquery, kemudian ditampilkan dibagian <div id="preview-image">. Untuk merubah ukuran gambar yang akan ditampilkan, modifikasi file style.css , pada bagian selector class .gbr {...}. 



You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar