Image Preview
Show a preview of a selected image file immediately after the user selects it, before uploading.
jQuery
Intermediate
4 min read
Image Preview on File Select
Example
$("#avatar").on("change", function() {
const file = this.files[0];
if (!file || !file.type.startsWith("image/")) return;
const reader = new FileReader();
reader.onload = function(e) {
$("#preview").attr("src", e.target.result).removeClass("d-none");
};
reader.readAsDataURL(file);
}); Pro Tip
Check file.type before reading to avoid showing previews for non-image files.