Menampilkan type File dan Ukuran pada input file

Publish Date : 18-05-2017 , dibaca 7501 kali, Hari ini dibaca : 1 kali ,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

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>