Upload multiple photos and preview them in a responsive grid gallery layout.
Images are displayed as thumbnails immediately after selection.
What you should see: images upload into a gallery grid with a lightbox on click. Accepts the common image types.
Drag & drop files here, or paste from clipboard
<au:AjaxFileUpload ID="Uploader1" runat="server"
AllowMultiple="true"
EnableLightbox="true"
AllowedExtensions=".jpg,.jpeg,.png,.gif,.webp"
AutoUpload="true" />
// JavaScript API approach
AjaxUploader.create(el, {
uploadUrl: '/ajaxupload.axd/upload',
multiple: true,
allowedExtensions: '.jpg,.jpeg,.png,.gif,.webp',
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) {
// Append thumbnail to gallery grid
grid.appendChild(createThumb(e.target.result, task.name));
};
reader.readAsDataURL(task.file);
}
});