How to get multiple photo names in js?

Question

I tried the code below to get the names of all the images I selected, but when 'alert' I only got 1 name out of the many names I chose. I want all the names of the photos I have selected to be saved in an array

----------------js code-------
$('input[type=file]')[0].files[0].name; 

------------html-------------------
<div class="form-group">
<label for="file">Chọn file Ảnh</label>
<input class="form-control" id="file" type="file" name="image[]" multiple="multiple"/>
<input type="submit"  value="upload" />
</div>

Answer 1

var images = $('input[type=file]')[0].files;
let imageNames = [];
if(images && images.length) {
 imageNames = images.map(image => image.name);    
}
console.log('All Images', imageNames);

You can try above solution...

You are using only first image from the array, that's why you are getting only one/first image every time.

Answer 2

welcome to SO. you may need to update the question/description as its vague. here is a small snippet to print all the attriutes of uploaded files as you requested.

 function printFiles() { let dt = $('input[type=file]')[0].files; for (let i = 0; i < dt.length; i++) { console.log('file Name: ' + dt[i].name + ', file size: ' + dt[i].size + ', file type: ' + dt[i].type + ', last Modified: ' + dt[i].lastModified + ', last ModifiedDate: ' + dt[i].lastModifiedDate); console.log('-----------------------------------------'); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group"> <label for="file">Chọn file Ảnh</label> <input class="form-control" id="file" type="file" name="image[]" multiple="multiple" /> <input type="submit" value="upload" onclick="printFiles()" /> </div>