How to get file name of files by using each loop in jquery

Question

This code does'nt show me the content which is present in an array

<input id="filesid" type="file" name="name"  multiple="multiple"/>
    <h2 id="show"></h2>
    <button id="upload">Upload</button>

Script used to display the name of file through array

    <script>
        $('#upload').on('click', function() {
            var filename=[];

            $("#show").each(function(){
                filename.push($(this).(files.name));
            });               

            alert(filename);                 

        });
    </script>

Ankrish, can you please finish you html. also what element has the upload id — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Mar 6, 2018 at 7:33

Ahmad · Accepted Answer · 2018-03-06 08:02:43Z

1

The <input type='file' mutliple> has a files property that might look like an array since it can report its length, but if you try to do a .forEach() or $.each() on its files property, that will trigger an error, because it is not an array.

The files property is in fact an object, with all of its keys having numeric values and all of the corresponding values are further child objects.

So to iterate through files, we need to go through the keys first. Luckily, length tells us where we can stop iterating after 0.

// this will be triggered automatically
// after the user had selected the files.
// no need to press any other buttons

$('#filesid').change(function() {

  //start with an empty array
  var files = [];

  //iterate through the native DOM 'this' object, not jQuery $(this)
  
  for (var i = 0; i < this.files.length; i++) {
    files.push(this.files[i].name);
  }


  console.log(files);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="filesid" type="file" name="name" multiple="multiple" />
<h2 id="show"></h2>

edited Mar 6, 2018 at 8:02

answered Mar 6, 2018 at 7:54

Ahmad

12.8k7 gold badges53 silver badges98 bronze badges

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

1 Comment

Ankrish Over a year ago

thanks for your answer but what if i don't use multiple and want to do this thing only with each loop ? and please check this link :(jsfiddle.net/ankrishx20/15v66aqr/1) i want to insert image path and image name from the dashboard to mysql db

Abhilash Ravindran C K · Accepted Answer · 2018-03-06 11:57:53Z

0

Following code will be helpful to you,

var cimagename =[];
var cimagepath =[];

  $(".cimage").each(function() {
      var filepath = this.value;
      var filename = this.value.split('\\').pop(); 
      cimagename.push(filename);
      cimagepath.push(filepath);
   });

   console.log(cimagename);
   console.log(cimagepath);

You can get all image's path and name using above each loop. Then you can pass this values as parameters to ajax call as cname and ccode.

edited Mar 6, 2018 at 11:57

answered Mar 6, 2018 at 7:46

Abhilash Ravindran C K

1,8562 gold badges17 silver badges24 bronze badges

13 Comments

Ankrish Over a year ago

Cant we do this thing with each loop in jquery ?

Abhilash Ravindran C K Over a year ago

Do you need to set course name as image path and course code as image name? If u don't need multiple files why do you need to use each?

Ankrish Over a year ago

thanks for your answer but what if i don't use multiple and want to do this thing only with each loop ? and please check this link : jsfiddle.net/ankrishx20/15v66aqr/10 i want to insert image path and image name from the dashboard to mysql db

Abhilash Ravindran C K Over a year ago

if you want a single file to be uploaded then why should you need to use each loop to get file name and path?

Ankrish Over a year ago

Did you check my latest fiddle ? i need to upload image name as well as image path dynamically into the database

|

Collectives™ on Stack Overflow

How to get file name of files by using each loop in jquery

2 Answers 2

1 Comment

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related