-->

K.E ^_~ Yang lagi galau ini penawarnya link

Multi upload file gambar dengan html css dan javascript


Pada tutorial CSS kali ini kita akan mencoba membuat elemen input yang berfungsi sebagai tempat upload beberapa file gambar sekaligus, dan menampilkan nama-nama file yang hendak kita upload ke dalam list di bawah input.

Defaultnya elemen input bertipe 'file' hanya bisa mengambil satu buah file untuk diupload. Namun kita akan mencoba memaksakan beberapa gambar untuk ikut masuk ke dalam elemen ini secara bersamaan. Lebih jelasnya silahkan lihat demo yang sudah saya siapkan



Ada dua gambar (icon) yang dibutuhkan dalam tutorial ini, yaitu icon tong sampah dan icon plus (+). Simpan terlebih dahulu:




Selanjutnya kita buat kerangka inputan menggunakan elemen html, lengkap beserta class yang akan kita manipulasi menggunakan css.

<fieldset>
	<label>Upload Gambar</label>
	<div class="tampilanInput" id="tampilanInput">
		<span class="show-path"></span>
		<span class="browse-btn"></span>
		<input type="file" name="filesToUpload" id="uploadGambar" multiple="" onChange="buatListGambar();" accept="image/*" />
	</div>
	<div class="fileTerpilih">
		<i>Gambar yang kamu pilih:</i>
	</div>
	<ul id="listGambar"></ul>
	<div class='rataKanan'>
		<input type='submit' value='Upload' />
	</div>
</fieldset>



Kerangka tersebut memuat bagian input dan bagian yang akan diisi oleh list file yang akan kita upload. Pada bagain input saya tambahkan atribut accept="image/*", maksudnya agar saat tombol browse diklik hanya akan menampilkan file berformat image (lebih spesifik). Lebih jelas tentang >>> Filter file dengan html murni

Sedangkan atribut onChange="buatListGambar();" merupakan fungsi javascript yang akan kita buat nanti, gunanya untuk menangkap value dari input untuk kemudian ditampilkan pada elemen ul yang memiliki id listGambar.

Atribut yang tak kalah penting adalah multiple="", atribut ini menyebabkan kita mempunyai kemampuan untuk memilih beberapa file dalam sekali upload.

Sekarang saatnya kita menambahkan style untuk tiap elemen agar terlihat lebih menarik.


* {
	padding: 0;
	margin: 0;
}
body {
	background: black;
}
fieldset{
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #92CC47;
	border: 1px solid #ccc;
	padding: 20px 0;
	margin: auto;
	width: 40%;
	position: relative;
	top: 100px;
	box-shadow: 2px 2px 3px #527328;
}

fieldset label{
	display: block;
	float: left;
	width: 50%;
	height: 25px;
	line-height: 30px;
	font-weight: bold;
	padding-left: 10px;
	margin: -5px 0 5px 0;
	color: #092E20;
}

.rataKanan{
	text-align: right;
	position: relative;
	right: 50px;
	top: 20px;
	margin: 0 0 20px 0;
}

.rataKanan input[type='submit']{
	background: #DB6100;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #FFF;
	padding: 5px;
	color: white;
}

.rataKanan input[type='submit']:hover{
	background: #F17716;
}

/* menyamakan tampilan elemen input pada semua browser
   dimodifikasi dari http://www.dte.web.id/2013/01/menyamakan-tampilan-elemen.html */
 
fieldset .tampilanInput{
	position:relative;
	display:inline-block;
	width:210px;
	height:20px;
	border:1px solid #aaa;
	background-color:white;
	overflow:hidden;
}

fieldset .tampilanInput input{
	opacity:0;
	filter:alpha(opacity=0);
	position:relative;
	z-index:4;
}

fieldset input[type=submit].hps_btn{
	/* button bergambar tong sampah menggunakan metode css sprite 
	 * http://www.klikedukasi.com/2012/10/berkenalan-dengan-css-sprite.html */
	background: url('ikon_hapus.png') no-repeat transparent;
	height: 16px;
	width: 16px;
	border: none;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	padding: 0 10px;
	color: #003E49;
	cursor: pointer;
	position: relative;
	right: 20px;
	float: right;
}

fieldset input[type=submit].hps_btn:hover{
	background-position: 0 -16px;
}

fieldset .tampilanInput span{
	display:block;
	position:absolute;
	top:2px;
	right:2px;
	bottom:0;
	background:url('plus.png') no-repeat scroll 0 0 #ffffff;
	font:normal bold 12px/20px Arial,Sans-Serif;
	color:white;
	padding:0 10px;
}

fieldset .tampilanInput .show-path{
	background:none;
	font-weight:normal;
	left:0;
	padding:0 5px;
}

fieldset .fileTerpilih{
	position: relative;
	left: 10px;
	top: 10px;
	color: #FFF;
	clear: both;
}

ul#listGambar{
	list-style: none;
	cursor: pointer;
	padding: 10px 0 0 0;
}

ul#listGambar li{
	display: block;
    padding: 5px 0 0 20px;
    text-decoration: none;
	color: #092E20;
}

ul#listGambar li:hover, ul#imgList li:hover{
	text-decoration: underline;
    background-position: 97% center;
}



Sampai di sini kita baru mendapatkan tampilan saja, namun masih perlu menambahkan sedikit perintah untuk fungsional tools yang kita buat. Tambahkan script ini di bagian paling bawah dari kode kita


function buatListGambar() {
	var input = document.getElementById("uploadGambar");
	var hapus = "<input type=\"submit\" class=\"hps_btn\" value=\"\">"
	var ul = document.getElementById("listGambar");
	
	while (ul.hasChildNodes()) {
		ul.removeChild(ul.firstChild);
	}
	for (var i = 0; i < input.files.length; i++) {
		var li = document.createElement("li");
		li.innerHTML = input.files[i].name+hapus;
		ul.appendChild(li);
	}
}



Script di atas bekerja saat elemen input dikenakan perlakuan. Secara spesifik akan mencari id bernama uploadGambar kemudian mengambil value pada elemen input dan menambahkan elemen li pada elemen ul

comment 5 komentar

  1. trus kalau mau di link kan dengan file manager gimana ya caranya, biar foto yang di upload bisa terkirim ke file manager semacam GQ FILE MANAGER? dimohon bantuan nya, bisa email saya ke am12ullah@gmail.com

    BalasHapus
    Balasan
    1. untuk itu mungkin agan perlu pelajari server side programming (php, python)

      Hapus
  2. gan itu arah uploadnya kemana? bgitu gw klik upload ga ada efek apa2 stelah gw ngikutin cara diatas

    BalasHapus
    Balasan
    1. ini cuma html, css dan javascriptnya aja mas (client side). jadi arah uploadnya ga kemana-mana. Kalau mau upload sesungguhnya Harus dipadukan dengan server side language (php, python)

      Hapus
  3. kalau contoh untuk upload ke sever side gimana ya mas?
    terimaksih atas bantuan nya

    BalasHapus

Catatan:
Seluruh komentar yang masuk akan dimoderasi terlebih dahulu. Komentar yang berbau spam, kasar, menghina, seluruhnya yang bersifat menghancurkan bukan membangun tidak akan ditampilkan. Silahkan bertanya dan memberi pendapat dengan sopan dan sesuai aturan.

Anda diperbolehkan mempublikasikan ulang artikel ini, dengan syarat:
1. Mintalah izin dengan cara berkomentar di bawah artikel ini
2. Wajib menyertakan link ke artikel ini dan menyertakan nama penulis

 
© Klikedukasi 2008 - 2013 | Design by Panembahan Satyapradana | 170p3x