1

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
  • 31
  • 8

2 Answers2

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>
Ahmad
  • 12,336
  • 6
  • 48
  • 88
  • 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 :(https://jsfiddle.net/ankrishx20/15v66aqr/1/) i want to insert image path and image name from the dashboard to mysql db – Ankrish Mar 06 '18 at 09:51
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.

Abhilash Ravindran C K
  • 1,818
  • 2
  • 13
  • 22
  • Cant we do this thing with each loop in jquery ? – Ankrish Mar 06 '18 at 09:38
  • 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? – Abhilash Ravindran C K Mar 06 '18 at 10:19
  • 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 : https://jsfiddle.net/ankrishx20/15v66aqr/10/ i want to insert image path and image name from the dashboard to mysql db – Ankrish Mar 06 '18 at 10:42
  • if you want a single file to be uploaded then why should you need to use each loop to get file name and path? – Abhilash Ravindran C K Mar 06 '18 at 10:51
  • Did you check my latest fiddle ? i need to upload image name as well as image path dynamically into the database – Ankrish Mar 06 '18 at 11:01
  • what is this course name and course code stands for? Is there any relationship exist between this course details and image details? – Abhilash Ravindran C K Mar 06 '18 at 11:05
  • basically course name is just a name its is not related with file name and file path, also course code is a code again which is not related with file name and file path and i want to take file name and file path from course image thats it – Ankrish Mar 06 '18 at 11:28
  • You can iterate over your image uploader using above each loop. Inside the loop you can access the filename and path. In order to store that path and name you can push it to array as cname and ccode. Then you have to pass that value as parameter to your ajax post method as same as you done for code and course. – Abhilash Ravindran C K Mar 06 '18 at 12:13
  • If it is working for you please accept it as your answer. – Abhilash Ravindran C K Mar 06 '18 at 12:17
  • Yes it works but i cant mark this answer as useful because i dont have 15 repo – Ankrish Mar 06 '18 at 12:28
  • Can u solve the fakepath issue ? When i get the path of image it will show me something like "C:fakepath/xyz.jpg" and it is not a valid path so when i fetch the path through database it will show me nothing – Ankrish Mar 06 '18 at 13:14
  • Some browsers have a security feature that prevents JavaScript from knowing your file's local full path. It makes sense - as a client, you don't want the server to know your local machine's filesystem. – Abhilash Ravindran C K Mar 06 '18 at 13:26
  • https://stackoverflow.com/questions/4851595/how-to-resolve-the-c-fakepath Check this link might helpful to you. – Abhilash Ravindran C K Mar 06 '18 at 13:31