I have a hidden input file for design reasons.
<label for="file" style="background: green;">Diseño bonito</label>
<input id="file" type="file" style="display:none;" multiple>
What I want to achieve is that next to my button the number of files loaded in that input file appears. So if I load two files then I get:
Nice design 2 files uploaded
Any ideas?
The first thing you should do is fire the click event of the input[file] with the method
click()
on clicking the pretty layout div. This will bring up the file selection window. Then you must assign the eventchange(fn)
thatinput[file]
is executed when the user selected the files in his directory.The element
input[file]
has a propertyfiles
with which you can get the total of selected elements with the property.length
and thus show when you save the user selected in the pretty design: