Upload a profile picture with a circular preview. The selected image is shown
in a round crop frame before uploading, simulating a typical avatar picker.
What you should see: one image at a time with a square (1:1) crop for profile pictures - .jpg/.jpeg/.png/.webp up to 5 MB. Choosing again replaces the previous avatar.
No photo
Drag & drop files here, or paste from clipboard
<au:AjaxFileUpload ID="Uploader1" runat="server"
AllowMultiple="false"
CropAspectRatio="1"
AllowedExtensions=".jpg,.jpeg,.png,.webp"
MaxFileSize="5242880"
AutoUpload="true" />
// JavaScript API approach
AjaxUploader.create(el, {
uploadUrl: '/ajaxupload.axd/upload',
multiple: false,
allowedExtensions: '.jpg,.jpeg,.png,.webp',
maxFileSize: 5 * 1024 * 1024,
autoUpload: true,
// onFileAdded fires once per file; onSelect would hand you the whole
// selection array, which FileReader cannot read.
onFileAdded: function (task) {
var reader = new FileReader();
reader.onload = function (e) {
avatarCircle.textContent = '';
var image = document.createElement('img');
image.src = e.target.result;
avatarCircle.appendChild(image);
};
reader.readAsDataURL(task.file);
}
});