Getting Number Of Files Selected

Question

So I have the following code at the moment:

$(window).load(function () {
    $('#browse-click').bind('click', function () { // use .live() for older versions of jQuery
    $('#file-type').click();      
    return false;
    });
});

I have a multiple file input that is hidden and then a button that using the code above is binded to it.

How would I go about getting the number of files selected after the "Open" button is clicked in the pop up dialog so that the button value would change from saying "Select Files" to "1 File Selected" or "X Files Selected"?

HTML Code:

<!-- Hide this from the users view with css display:none; -->
<input style="display: none;" id="file-type" type="file" size="4" name="attachment[]" multiple />

<!-- Style this button with type image or css whatever you wish -->
<input id="browse-click" type="button" class="button" value="Select Files"/>

Your explanation is not clear. what is `#browse-click` and `#file-type`? — Mr_Green, Sep 17 '13 at 11:48
Check this - http://stackoverflow.com/questions/36147958/jquery-validation-plugin-file-upload/36149881#36149881 — Half Blood Prince, Mar 22 '16 at 09:34

score 0 · Answer 1 · answered Sep 17 '13 at 12:26

Used this code. Works well :)

<script>
function handleFileSelect(evt) {

    var files = evt.target.files; // FileList object

    if (files.length < 1) { $('#browse-click').attr('value','Select Files'); }
    if (files.length = 1) { $('#browse-click').attr('value','1 File Selected'); }
    if (files.length > 1) { $('#browse-click').attr('value', files.length + ' Files Selected'); }

}

document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

Getting Number Of Files Selected

1 Answers1