Sedikit Info Seputar
Cara Mudah Membuat Dialog Box dan Upload Image seperti Facebook Uploader
Terbaru 2017
- Hay gaes kali ini team Official Sahabat Android, kali ini akan membahas artikel dengan judul Cara Mudah Membuat Dialog Box dan Upload Image seperti Facebook Uploader, kami selaku Team Official Sahabat Android telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Official Sahabat Android. semoga isi postingan tentang
Artikel free tutorials, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
Cara Mudah Membuat Dialog Box dan Upload Image seperti Facebook Uploader
Terbaru
link: Cara Mudah Membuat Dialog Box dan Upload Image seperti Facebook Uploader
Berbagi Cara Mudah Membuat Dialog Box dan Upload Image seperti Facebook Uploader Terbaru dan Terlengkap 2017
 |
| Cara Mudah Membuat Dialog Box dan Upload Image seperti Facebook Uploader |
Modal Like Facebook - Saat ini sangat banyak sekali plugin atau widget modal box yang berkembang untuk blog maupun untuk website. Pada kesempatan kali ini RIANC akan memberikan script bagaimana kita membuat Modal Box atau Pop Up Window seperti yang ada di facebook.
Popup Window ini penulis implementasikan di skripsi saya yang berjudul Pencarian Citra Berbasis Isi Menggunakan Transformasi Wavelet Haar, sehingga tampilannya seperti pada gambar di atas. Saya pasang saat akan melakukan upload image di sistem tersebut.
Perlengkapan yang harus sahabat persiapkan yaitu :
1. Twitter Bootstrap yang dapat saudara download di http://getbootstrap.com/getting-started/
2. Source Code berikut ini
a. File Index.html atau layout home (awal) yang akan menjadi tempat Tombol yang akan menampilkan Popup Modal Window. Kemudian pasang source code berikut ini.
<div class="logo" title="GOImages : pencarian citra berdasarkan isi">
<a href="./"><img src="./images/layouts/go-image.png" height="73px" width="175px" /></a>
</div>
untuk yang berwarna merah, silahkan ganti dengan gambar tombol yang sahabat simpan
b. include file js dan css dari Bootstrap yang sahabat download, seperti berikut ini:
<script type="text/javascript" src="./js/jquery-2.0.3.min.js"></script>
<script src="./js/bootstrap/js/bootstrap.js"></script>
<link href="./js/bootstrap/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./css/modalUp.css" />
c. Untuk file css/modalUp.css berikut ini isi dari kode css nya.
.modalUp{
font-size:33px;
height:100px;
opacity:0.0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=0);
-moz-opacity:0.0;
-khtml-opacity: 0.0;
}
.browse{
width:95%;
height:100px;
position:absolute;
}
.browse .p{
margin:40px 0px 0px 40%;
}
d. Untuk Class-classnya yang terdapat pada css tersebut terdapat pada file modalUp.php
3. Buatlah file PHP atau HTML dengan kode berisi seperti kode berikut ini, dalam percobaan ini penulis menggunakan file dengan nama modalUp.php, dengan source code :
<form method="post" action="./home.php?pencarianId=<?php echo md5("pencarian").md5("pencarianImage")."&token=".md5("pencarianImageToken").md5("iMageP"); ?>" enctype="multipart/form-data">
<div class="modal fade" id="uploadCitra" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Upload Citra Latih</h4>
</div>
<div class="modal-body">
<div class="input-gambar">
<div class="browse">
<div class="p">Pilih Gambar Disini</div>
</div>
<input id="gambar" class="modalUp" maxlength="2048" name="image" autocomplete="off" type="file" title="Pencarian Gambar" />
<input type="hidden" value="citraUji" name="jenis" />
<input type="hidden" id="x" name="x" /><input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" /><input type="hidden" id="h" name="h" />
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Simpan Citra</button>
</div>
</div>
</div>
</div>
</form>
4. Selesai dech, hasilnya seperti pada gambar diatas.
Pencarian Lain :
1. Membuat Upload Image seperti Facebook Uploader
2. Cara Mudah Membuat Dialog Box atau Popup Window seperti di facebook
3. Modal Box keren seperti facebook
4. Upload Multiple file Image like facebook profile
5. Cara membuat upload gambar seperti di facebook
6. Upload Image using Ajax Uploader facebook
7. Menonaktifkan Closed Modal di luar area
8. Membuat Modal Box keren seperti di facebook sengan Bootstrap
9. Popup Window dengan CSS3 dan HTML5 seperti facebook
10. Membuat Opacity File Upload (Hidden filetype file uploader) dengan CSS
Itulah sedikit Artikel Cara Mudah Membuat Dialog Box dan Upload Image seperti Facebook Uploader terbaru dari kami
Semoga artikel Cara Mudah Membuat Dialog Box dan Upload Image seperti Facebook Uploader yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Official Sahabat Android. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Cara Mudah Membuat Dialog Box dan Upload Image seperti Facebook Uploader