Count the number of images selected with input = file
Is there a way in PHP to show the number of files selected from "input = file" inside the input? Something like that.
I've only seen codes that print the number in the label outside of the input like this (from this HTML5 question Get count of input files on change )
$('input[type=file]').change(function () {
fileCount = this.files.length;
$(this).prev().text(fileCount + 'Selected');
})
But I don't understand how I can put the value inside the input ... inside the "value" maybe?
This is my input code
<div id="file-ins-immagini">
<div class="et-form-ins">Aggiungi immagini</div>
<input type="file" name="file-input[]" id="file-input" value="" class="file" multiple>
</div>
Thank!
+3
source to share
2 answers
It's pretty easy to do it using plain Javascript or jQuery:
/* Input Files Count */
$("body").on("change", function () {
var numFiles = $("input", this)[0].files.length;
$('.browseFiles').addClass('active'); // optional css for active
});
The above code creates a function that simply counts whatever you select from the form button. Using jQuery allows a little more creativity with styling elements (css / mouseover effects), but not required.
/* Input Files Count */
$("body").on("change", function() {
var numFiles = $("input", this)[0].files.length;
$('.browseFiles').addClass('active');
});
/* MouseOver Effects */
$('.browseFiles').mouseover(function() {
$(this).addClass('over');
}).mouseout(function() {
$(this).removeClass('over');
});
/ #wrapper {
width: 600px;
margin-left: auto;
margin-right: auto;
}
.browseTitle {
font-family: Helvetica Neue;
font-size: 14px;
color: black;
padding: 8px 6px 8px 6px;
width: 610px;
float: left;
_float: none;
background: #eee;
border-radius: 5px;
border: 2px solid #FFFFFF;
cursor: pointer;
}
.browseFiles {
font-family: menlo;
font-size: 11px;
padding: 2px 2px 2px 2px;
width: 620px;
float: left;
_float: none;
background: #ddd;
border-radius: 5px;
cursor: pointer;
}
.on {
background: #77a509;
}
.over {
background: #eee;
}
.active {
background: #9ad60c;
}
.button, input, select {
font-family : inherit;
font-size : 100%;
}
.button {
position : inline;
padding : 5px;
font : bold 1.2em sans-serif;
background : none;
cursor : pointer;
}
.button:hover, .button:focus {
outline : none;
background: #9ad60c;
color : #000;
border-radius: 5px;
border: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<div class="browseTitle">Immagini Allegate</div>
<div class="browseFiles">
<form enctype="multipart/form-data" class="button">
<input type="file" name="uploadFile[]" multiple="multiple" />
</form>
</div>
</div>
0
source to share