contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Menampilkan type File dan Ukuran pada input file

Posted in Javascript Jquery Life at 18 Mei 2017 With 0 Comments

Tutorial kali ini kita akan share artikel Cara Menampilkan Type File , Name File dan Ukuran / Size File pada inputan file sebelum upload file di server. dengan seperti ini kita dapat menampilkan file tipe pdf, jpg , png ,css dll serta ukuran file yang akan kita upload nantinya

OK.. langsung saja kita bahas Cara menampilkan Type File dan Ukuran pada input file

menampilkan ukuran nama file sebelum upload

▼ Download Source Code Dibawah Ini ▼


HTML CODE

//*
<input id="fUpload" multiple type="file" /><br />
   <ul id="ulList">
   </ul>
<input id="btnShow" type="button" value="Show" />
//*

JQUERY CODE

//*
$("#btnShow").on('click', function () {
    $("#ulList").empty();
    var fp = $("#fUpload");
    var lg = fp[0].files.length; // get length
    var items = fp[0].files;
    var fragment = "";
    
    if (lg > 0) {
        for (var i = 0; i < lg; i++) {
            var fileName = items[i].name; // get file name
            var fileSize = items[i].size; // get file size
            var fileType = items[i].type; // get file type

            // append li to UL tag to display File info
            fragment += "<li>" + fileName + " (<b>" + fileSize + "</b> bytes) - Type :" + fileType + "</li>";
        }

        $("#ulList").append(fragment);
    }
});
//*

SCRIPT LENGKAP :

<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><br/>
<input id="fUpload" multiple type="file"/>
<ul id="ulList"></ul>
<input id="btnShow" type="button" value="Show"/><br/>
<script>
$(document).ready(function(){
$("#btnShow").on('click', function () {
    $("#ulList").empty();
    var fp = $("#fUpload");
    var lg = fp[0]
    .files.length; // get length
    var items = fp[0].files;
    var fragment = "";
    if (lg > 0) {
        for (var i = 0; i < lg; i++) {
            var fileName = items[i].name; // get file name
            var fileSize = items[i].size; // get file size
            var fileType = items[i].type; // get file type
          // append li to UL tag to display File info
         fragment += "<li>" + fileName + " " + fileSize + " bytes. Type :" + fileType + "</li>";
        }
       $("#ulList").append(fragment);
    }
});
});
</script>
</body>
</html>

Artikel Rekomendasi



Artikel Terkait

Diskusi