customize input for multiupload images

Asked

Viewed 214 times

4

How can I customize a file input field for multiupload images?

would like to get some information from the image, such as: format, size.

(I know there are several plugins for this, but I would like to learn from scratch how to do)

Ex:

Multiupload de imagens personalizado

javascript html css upload input
  • 1

    Dude, I usually do a div with to stylize and the input I leave with display:none, there in Jquery I make the div click in the input.

  • Maybe if you study the source code of these plugins, it will also help.

  • 1

    Recently I’m using the jQuery Fileupload. It is very complex, so you may have a certain work in implementing something exactly in this style, with file size, cancel action and etc.

1 answer

2

There are limitations to what type of information is accessible in Javascript. On the server side it 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>
<label for="ficheiros"></label>
<input id="ficheiros" type="file" />

File size

Accessible via this.files[0].size. To convert to Kb you can use this function that 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 file name can do nome.split('.').pop() to obtain only the extension.

Browser other questions tagged javascript html css upload input

You are not signed in. Login or sign up in order to post.