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

Demo

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://klikedukasi.blogspot.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