Get image exif info by Exif js
No Description Available
$("#file").change(function(e) {
// Exif js
EXIF.getData($("#file")[0].files[0], function() {
let obj = EXIF.getAllTags(this);
let tr = "";
if(Object.entries(obj).length === 0 && obj.constructor === Object){
$('.alert').show().html('No Exif Data Found ...').delay(4000).fadeOut();
}
Object.keys(obj).forEach(function(key) {
tr += "<tr><th>" + key + "</th><td>" + obj[key] + "</td></tr>";
});
$("#res").html(tr);
});
var reader = new FileReader();
reader.readAsDataURL($("#file")[0].files[0]);
var me = this;
reader.onload = function() {
var fileContent = reader.result;
$(".adp-img").html(`<img id="pi" src='${fileContent}'>`);
};
});
<section class="mt-5">
<div class="container">
<div class="card">
<div class="card-body">
<div class="form-row">
<div class="col-md-6 cil-xs-12">
<form class="adp-form">
<div class="form-row align-items-center">
<label>Choose Image</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-images"></i></div>
</div>
<input type="file" class="btn btn-light btn-sm form-control" id="file" placeholder="Jane Doe" accept="image/*">
</div>
</div>
</form>
<div class="adp-img"></div>
</div>
<div class="col-md-6 cil-xs-12 table-responsive">
<h2>Result</h2>
<p>Exif data will shown here.....</p>
<div class="alert alert-danger" style="display:none"></div>
<table class="table table-hover table-striped table-sm">
<tbody id="res">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>