There is a way in PHP to show the number of files selected from an "input=file", inside the input? Something like this.

I saw only codes that print the number in a label outside the input, like this (from this question HTML5 Get input file count on change)

    $('input[type=file]').change(function () {
    fileCount = this.files.length;
    $(this).prev().text(fileCount + 'Selected');
})

But I don't understand how can I put the value inside the input...inside "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 you!

There is a way in PHP to show the number of files selected from an "input=file", inside the input? Something like this.

I saw only codes that print the number in a label outside the input, like this (from this question HTML5 Get input file count on change)

    $('input[type=file]').change(function () {
    fileCount = this.files.length;
    $(this).prev().text(fileCount + 'Selected');
})

But I don't understand how can I put the value inside the input...inside "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 you!

• javascript
• jquery
• html

Share Improve this question Follow edited May 23, 2017 at 12:24 CommunityBot 111 silver badge asked Oct 27, 2014 at 15:58 JEricaMJEricaM 82422 gold badges1919 silver badges3939 bronze badges 3

• 3 Not with a regular file input. You would have to create your own markup (say with a div and a button), have a hidden file input, and link the two together with javascript – Steve Commented Oct 27, 2014 at 16:00
• 2 Don't you mean javascript instead of php? – jeroen Commented Oct 27, 2014 at 16:04
• 1 @jeroen yes sorry, my mistake. I edit the question – JEricaM Commented Oct 27, 2014 at 16:08

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

It's pretty simple to do this 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 code above creates a function that simply counts anything you select from the form button. Using jQuery allows a bit 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./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>

Use this

var num_of_images = $("#file-input")[0].files.length;
alert(num_of_images);

Here is a code that I wrote using JS

function Filecount() {

  // GET THE FILE INPUT.
  var fi = document.getElementById('file');

  // VALIDATE OR CHECK IF ANY FILE IS SELECTED.
  if (fi.files.length > 0) {

    // THE TOTAL FILE COUNT.
    document.getElementById('filep').innerHTML =
      'Total Files: <b>' + fi.files.length + '</b></br >';
  } else {
    alert('Please select a file.');
  }
}

<html>

<head>
  <title>Count-file</title></head>

<body>
  <p>
    <input type="file" id="file" multiple />
  </p>

  <!--SHOW RESULT HERE-->
  <p id="filep"></p>

  <p>
    <input type="submit" value="Show Details" onclick="Filecount()">
  </p>
</body>

</html>