Upload an image to extract and display basic metadata such as file name, type,
size, and image dimensions. EXIF data like camera model or GPS requires a
server-side library; here we show client-side metadata extraction.
What you should see: dimensions, size and type read in the browser and displayed before upload - one image at a time, most common formats accepted.
Drag & drop files here, or paste from clipboard
<au:AjaxFileUpload ID="Uploader1" runat="server"
AllowMultiple="false"
AllowedExtensions=".jpg,.jpeg,.png,.gif,.webp,.bmp,.tiff"
AutoUpload="true" />
// JavaScript: extract client-side metadata
uploader.on('select', function(files) {
var file = files[0];
metadataOut.textContent =
'Name: ' + file.name + '\n' +
'Type: ' + (file.type || 'unknown') + '\n' +
'Size: ' + file.size + ' bytes';
// Read image dimensions
var img = new Image();
var objectUrl = URL.createObjectURL(file);
img.onload = function () {
URL.revokeObjectURL(objectUrl);
metadataOut.textContent += '\nDimensions: ' +
img.naturalWidth + ' x ' + img.naturalHeight;
};
img.onerror = function () { URL.revokeObjectURL(objectUrl); };
img.src = objectUrl;
// For full EXIF: use a server-side library like
// System.Drawing or ImageSharp on the upload handler.
});