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 :
 |
| Gambar.1 |
 |
| 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 {...}.
0 Response to "Select dan Preview Multiple Image dengan Jquery"
Posting Komentar