HTML Question

Javascript: How to get this image data

How do I get these values of image especially the name, size, type that shows from console when I am dragging a image. And display those data to my specific div

File {name: "free-windows-10-wallpaper_050549897_263.jpg", lastModified:
1464238729860, lastModifiedDate: Thu May 26 2016 12:58:49 GMT+0800 (Malay
Peninsula Standard Time), webkitRelativePath: "", size: 1185535…}
lastModified : 1464238729860
lastModifiedDate :Thu May 26 2016 12:58:49 GMT+0800 (Malay Peninsula Standard Time)
name : "free-windows-10-wallpaper_050549897_263.jpg"
size : 1185535
type : "image/jpeg"
webkitRelativePath : ""
__proto__ : File

This is the js code.

var obj = $('.drag_me');

obj.on('dragover', function(e){
$(this).css('border', '2px solid #39ADCD');


obj.on('drop', function(e){
$(this).css('border', '2px dotted #39ADCD');

var files = e.originalEvent.dataTransfer.files;
var file = files[0]; //<-- I need to get the size, name, image type of this image


So i can display those data to my html

<div class="drag_here">
<div class="drag_me">
<center id="center_html">
Drag image here

Answer Source

You can access it using,, 

Note: you need to include it just before your //upload(file) statement.