customize input for multiupload of images

There are limitations on what kind of information is accessible in JavaScript. Server-side is different and more information can be obtained. But still some parameters are accessible.

Example:

$('#ficheiros').on('change', function () {
    var label = $(this).prev();
    var tamanho = this.files[0].size;
    var nome = this.files[0].name;
    var tipo = nome.split('.').pop();
    var info = 'Nome do fichiero: ' + nome + ', Tipo de extensão: ' + tipo + ', tamanho em bytes: ' + tamanho
    label.html(info);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><labelfor="ficheiros"></label>
<input id="ficheiros" type="file" />

File size

Accessible via this.files[0].size . To convert to Kb you can use this function I found :

function bytesToSize(bytes) {
   var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
   if (bytes == 0) return '0 Byte';
   var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
   return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
};

Filename

Accessible via this.files[0].name;

File extension

Having the file name can do nome.split('.').pop() to get only the extension.