get list of files names from input using jquery

Question

I want to get the selected files names from the input element. here is the html element:

 <input id="camera-open" type="file" multiple>

and here is jquery i am trying to do:

    $('#camera-open').change(function(){        
       var names = [];
       $('input[type=file]').each(function(){
       names = $('input[type=file]').val().split('/').pop().split('\\').pop();    
});

But it only gives me one file name! Any idea?

declare var names[] initially, every time during change it get's initialize to null — shubham khandelwal
– shubham khandelwal, Commented Apr 9, 2017 at 13:45

gurvinder372 · Accepted Answer · 2017-04-09 13:47:17Z

1

try with

//step by step
$( '#camera-open' ).change( function( event ){        
       var fileList = Array.prototype.slice.call( event.target.files );       
       var filePaths = fileList.map( function(file){ return file.name; });
       var onlyNames = filePaths.map( function(file){ return file.split('/').pop().split('\\').pop(); });
       console.log( onlyNames );
});

answered Apr 9, 2017 at 13:47

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dan Philip Bejoy · Accepted Answer · 2017-04-09 13:55:26Z

0

Try initialising the variables outside the loop,

var names = [],
    fileName;
$('#camera-open').change(function(){        
  $('input[type=file]').each(function(){
    fileName = $(this).val().split('/').pop().split('\\').pop();
    names.push(fileName);
  });
});
console.log(names);

answered Apr 9, 2017 at 13:55

Dan Philip Bejoy

4,4032 gold badges20 silver badges34 bronze badges

Collectives™ on Stack Overflow

get list of files names from input using jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related