jQuery & JavaScript

Preview an image before uploading (JavaScript, jQuery and ASP.NET FileUpload)

jQuery & JavaScript · By the Postback Notes editorial team · Published 2026-08-17

Showing the selected picture before upload lets users catch the wrong file early. The browser can display a local file without sending it anywhere: URL.createObjectURL gives a temporary URL for the file, which an <img> can show immediately.

Plain JavaScript

<asp:FileUpload ID="fuPhoto" runat="server" accept="image/png,image/jpeg,image/webp" />
<img id="preview" alt="Preview of the selected image" hidden style="max-width:240px;max-height:240px">
<p id="photoError" role="alert"></p>

<script>
  (function () {
    var input = document.getElementById("<%= fuPhoto.ClientID %>");
    var img = document.getElementById("preview");
    var error = document.getElementById("photoError");
    var lastUrl = null;

    input.addEventListener("change", function () {
      error.textContent = "";
      if (lastUrl) { URL.revokeObjectURL(lastUrl); lastUrl = null; }
      var file = input.files && input.files[0];
      if (!file) { img.hidden = true; return; }

      if (!/^image\/(png|jpeg|webp)$/.test(file.type)) {
        error.textContent = "Please choose a PNG, JPEG or WebP image.";
        input.value = ""; img.hidden = true; return;
      }
      if (file.size > 5 * 1024 * 1024) {
        error.textContent = "The image must be 5 MB or smaller.";
        input.value = ""; img.hidden = true; return;
      }
      lastUrl = URL.createObjectURL(file);
      img.src = lastUrl;
      img.hidden = false;
    });
  })();
</script>

revokeObjectURL frees the memory held for the previous preview. Clearing input.value removes an invalid file from the form so it is not uploaded.

jQuery version with FileReader

$(function () {
  $("#<%= fuPhoto.ClientID %>").on("change", function () {
    var file = this.files && this.files[0];
    if (!file || file.type.indexOf("image/") !== 0) { $("#preview").prop("hidden", true); return; }
    var reader = new FileReader();
    reader.onload = function (e) {
      $("#preview").attr("src", e.target.result).prop("hidden", false);  // data: URL
    };
    reader.readAsDataURL(file);
  });
});

FileReader.readAsDataURL produces a base64 data: URL. It works everywhere but copies the whole file into a string; createObjectURL is lighter for large photos.

Several images

With AllowMultiple="true" on the FileUpload (.NET 4.5+), loop over input.files and append one <img> per file to a container, applying the same checks to each.

The server still decides

Client checks rely on the browser's reported MIME type, which comes from the file extension. On the server, check the extension against an allow-list, the size, and ideally that the content decodes as an image; store it under a generated name outside the web root. All of this is shown in Upload and download files and Validate the file extension. If the preview is inside an UpdatePanel, make the upload button a PostBackTrigger: files cannot be sent through partial postbacks.

Orientation and privacy

Photos taken with phones may store their rotation in EXIF metadata; current browsers apply it when displaying images, so the preview usually looks right, but server-side processing libraries may not. If you resize images on the server, apply the orientation there too. The same metadata can contain the GPS location where the photo was taken: consider removing EXIF data on the server before publishing user photos.

Official documentation