How to show local picture in web page?

by

You can do that easily using FileReader.readAsDataURL(). The user chooses an image and you can display it without needing to upload it.

For more info see https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

Here is the code:

function previewFile() {
    // Where you will display your image
    var preview = document.querySelector('img');
    // The button where the user chooses the local image to display
    var file = document.querySelector('input[type=file]').files[0];
    // FileReader instance
    var reader  = new FileReader();

    // When the image is loaded we will set it as source of
    // our img tag
    reader.onloadend = function () {
      preview.src = reader.result;
    }

    
    if (file) {
      // Load image as a base64 encoded URI
      reader.readAsDataURL(file);
    } else {
      preview.src = "";
    }
  }
  <input type="file" onchange="previewFile()"><br>
  <img src="" height="200" alt="Image preview...">

More Related Contents:

  1. comma after td entry html [closed]
  2. How can we define html5? [closed]
  3. Recommended way to embed PDF in HTML?
  4. Limit file format when using ?
  5. Using relative URL in CSS file, what location is it relative to?
  6. html select only one checkbox in a group
  7. Is there a CSS selector for the first direct child only?
  8. Limit scope of external css to only a specific element?
  9. How would I display a TIFF images in all web browsers? [closed]
  10. Do you quote HTML5 attributes? [closed]
  11. Why the content is not covered by the background of an overlapping element?
  12. using mailto to send email with an attachment
  13. Drop-down menu that opens up/upward with pure css
  14. When should one use HTML entities?
  15. Soft hyphen in HTML ( vs. ­)
  16. An ‘ul’ element can never be a child of a ‘p’ element
  17. Gap in Bootstrap stacked rows
  18. Best Way to View Generated Source of Webpage?
  19. HTML5 Video // Completely Hide Controls
  20. Remove background arrow from date input in Google Chrome v20
  21. Is it possible to make a div 50px less than 100% in CSS3? [duplicate]
  22. Gradient Stroke Along Curve in Canvas
  23. CSS align images and text on same line
  24. How do I capture text from a HTML element given its id=”” from a WebView2 in VB.NET?
  25. Is there a `pointer-events:hoverOnly` or similar in CSS?
  26. Adding style to file upload button in css
  27. How can I embed SVG into HTML in an email, so that it’s visible in most/all email browsers?
  28. How to get horizontal scroll bar in select box in IE?
  29. Table with table-layout: fixed; and how to make one column wider
  30. Question mark characters display within text. Why is this?

Leave a Comment