We write the easiest and fastest input type file

Good day, my dear friend. In the network, and on Habré, there are many articles on creating your input type = "file", but they all differ in a large number of crutches and a large amount of code, which, it seems to me, is not good. For, however paradoxical it may be, less is better .



A working example of what happens:


')
The very principle of a custom input file has no particular differences: we remove the input from the screen, and put the label on the shoulders, to which we will add our own styles. The main difference is a small amount of code.

Let's start

We have input and label:

<label for="myfile" class="label"> </label> <input type="file" class="my" id="myfile" name="myfile" multiple> 

Now remove the input from the screen by adding the following styles to the my class:

 .my { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } 

And also we stylize the label itself by adding its own styles to it:

 .label { width: 180px; height: 50px; border-radius: 4px; text-align: center; cursor: pointer; display: block; font: 14px/50px Tahoma; transition: all 0.18s ease-in-out; border: 1px solid #333; color: #333; } .label:hover { color: white; background: #333; } 

And now the most interesting: javascript. Actually, here it is:

 $('.my').change(function() { if ($(this).val() != '') $(this).prev().text(' : ' + $(this)[0].files.length); else $(this).prev().text(' '); }); 

It works as follows: When a user presses input with the class .my, then js starts tracking its change. Then comes into the matter if (if). So if we have this (this) input not empty (that is, the file has been selected), then the element in the neighborhood above (this is our label) will receive the text “Selected files” + number of files that the user has selected . Well, if the user has not selected anything, then the label will simply receive the text "Select files".

Everything!

// Additional Information

There may be a problem with the layout, which was with me. And the problem may lie with this notorious .prev (). In fact, there is a possibility that it is impossible to place the label and the input file next to each other, and the text “Selected files” will be applied not to the label, but to the left element.

This problem can be solved like this:

Place the label and input in one div, and give this div a class, for example a “box-form”

 <div class="box-form"> <p> -</p> <div> <label for="myfile" class="label"> </label> </div> <div> <div></div> <input type="file" class="my" id="myfile" name="myfile" multiple> </div> </div> 

And replace in js

 $(this).prev() 

on

 $(this).closest('.box-form').children('.label') 

Voila! Now, standing far apart, label and input are able to interact with each other.

It is better, of course, to avoid such cases, but nobody is protected from frameworks, where the input'y write not you, but the framework itself generates them ...

Thanks for attention.