Deprecated: Function create_function() is deprecated in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/plugins/wp-automatic/wp-automatic.php on line 70

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; COUNT_CLASS has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/functions.php on line 1713

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; sidebar_generator has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/plugins/multiple_sidebars.php on line 29

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_video_widgets has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/video.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_soundcloud has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/soundcloud.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_counter_widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/social-counter.php on line 9

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_news_in_pic has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/new-in-pic.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Flickr_Widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/flickr.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_fb_likebox has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/fb.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_google_follow has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/google-follow.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_popular has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/popular-posts.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_recent_posts has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/recent-posts.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_cate_posts has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/category-posts.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; tabs_widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/tabs.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_youtube_widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/youtube-subscribe.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_social_links has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/social-links.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_comments_widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/comments.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_author_bio has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/bio-author.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_login has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/login.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_search_widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/search.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Ad_120_600_Widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/ads120.php on line 7

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Ad_125_125_Widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/ads125.php on line 7

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Ad_250_250_Widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/ads250.php on line 7

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; Ad_300_300_Widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/ads300.php on line 7

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_tweets_load has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/twittes.php on line 10

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; feedburner_widget has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/newsletter.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_related has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/related.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_slider has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/slider.php on line 6

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; bd_top_rate has a deprecated constructor in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/themes/renad/includes/widgets/top-review.php on line 6
Previewing Image Before File Upload – JavaScript Tutorial | D4mations.com
  • Tuesday , 19 January 2021

Previewing Image Before File Upload – JavaScript Tutorial

Code Canyon



In this video I’ll be demonstrating how it’s possible to use some simple JavaScript in order to display a preview of an image before uploading it to the web server.

Support me on Patreon:
https://www.patreon.com/dcode – with enough funding I plan to develop a website of some sort with a new developer experience!

Follow me on Twitter @dcodeyt!

If this video helped you out and you’d like to see more, make sure to leave a like and subscribe to dcode!

Original source

3d Ocean

Related Posts

21 Comments

  1. Jacob Broughton
    April 5, 2020 at 19:24

    Awesome tutorial!

  2. KERZAKA-UBIIMII
    April 5, 2020 at 19:24

    thanks

  3. THIRUPATHI DONTHARAVENA
    April 5, 2020 at 19:24

    Nice job. Thanks man

  4. Rheiza Kurnia
    April 5, 2020 at 19:24

    sure can you give me script this? i needed wkwkw

  5. Xue Si
    April 5, 2020 at 19:24

    Finally got this working! Thank you!

  6. Hammad Ben Sardar
    April 5, 2020 at 19:24

    what about previewing multiple images? what changes should i do while implementing ur code?

  7. p Informatik
    April 5, 2020 at 19:24

    Hi. Great Thanks. But I have Problems with the fix-orientation.. what can I do?

  8. Frooties
    April 5, 2020 at 19:24

    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!– Compiled and minified CSS –>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"&gt;
    <!– Compiled and minified JavaScript –>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script&gt;
    <!–Import Google Icon Font–>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <style>
    .image-preview
    {
    width: 150px;
    min-height: 150px;
    border: 2px solid #dddddd;
    margin-top: 15px;

    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: 11#cccccc;
    }
    .image-preview__image
    {
    display: none;
    width: 100%;
    }

    </style>
    <title>Document</title>
    </head>
    <body>

    <input type="file" name="inpFile" id="inpFile">
    <div class="image-preview" id="imagePreview">
    <div class="card-image">
    <img src="" alt="Image Preview" class="image-preview__image">
    </div>
    <img src="" alt="Image Preview" class="image-preview__image">
    <span class="image-preview__default-text">Image</span>
    </div>

    <script>
    const inpFile = document.getElementById("inpFile");
    const previewContainer = document.getElementById("imagePreview");
    const previewImage = previewContainer.querySelector(".image-preview__image");
    const previewDefaultText = previewContainer.querySelector(".image-preview__default-text");

    inpFile.addEventListener("change", function() {
    const file = this.files[0];

    if (file) {
    const reader = new FileReader();

    previewDefaultText.style.display = "none";
    previewImage.style.display = "block";

    reader.addEventListener("load", function() {
    previewImage.setAttribute("src", this.result);

    });

    reader.readAsDataURL(file);

    }else{
    previewDefaultText.style.display=null;
    previewImage.style.display=null;
    previewImage.setAttribute("src", "");
    }

    });
    </script>
    </body>

    </html>

  9. Short Films
    April 5, 2020 at 19:24

    Shall I can have the code plz

  10. Steph Tech
    April 5, 2020 at 19:24

    hello can u do it with and svg image when you click onthe svg it automatically carry to where you have the picture to upload

  11. Prasad Poojary
    April 5, 2020 at 19:24

    Very helpful Video

  12. JOKER CARD
    April 5, 2020 at 19:24

    can u plz give me ur downloaded extensions and how to make my editor font-family is ur editor font-family and thx for ur work

  13. Shubham Singla
    April 5, 2020 at 19:24

    Thanku very much

  14. GORILLA Plays
    April 5, 2020 at 19:24

    Pure Content . Respect 💛💛

  15. sagar kumar
    April 5, 2020 at 19:24

    thanks a lot you helped me to solve my problem

  16. Thrang E O
    April 5, 2020 at 19:24

    Finally !!! I got it thank you sir

  17. Zikaruus
    April 5, 2020 at 19:24

    The picture gets swapped into a horizontal position, the photo itself is vertical. Any idea how to fix this? 🙁

  18. Сергей Курганов
    April 5, 2020 at 19:24

    previewImage.setAttribute("src", "") – visual action Not in firefox only chrome

  19. Paweł J.
    April 5, 2020 at 19:24

    Nice trick with these null values, didn't know about that. Thanks a lot!

  20. Boris Bosnjak
    April 5, 2020 at 19:24

    Never worked with this, great tutorial!

  21. Bikram Chettri
    April 5, 2020 at 19:24

    Thanks for this will surely watch this tutorial. Do you have any idea on how to make a link previewer?

Leave A Comment

You must be logged in to post a comment.