How can I display a photo chosen through a html input in a div?

Question

What I am trying to do is take a photo from a folder using and displaying it in a place on the page. I've tried many solutions that I've discovered all around the internet and none worked. Is this even doable with bare-bones HTML, CSS and JS? I am sorry if this is a dumb question, I am just a beginner when it comes to web development.

Here is my code:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styleTake2.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <script>
            function getImage(input){
                if(input.files && input.files[0]){
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        $('#placeholder')
                            .attr('src', e.target.result)
                            .width(150)
                            .height(200);
                    };
                }

                reader.readAsDataURL(input.files[0]);
            }
        </script>
    </head>
    <header>
        <img src="assets/logo.png" class="logo">
        <ul class="top-bar"> 
            <li class="top-button">
                <i class="fa fa-upload"></i> 
                <input id="uploadFile" type="file" onchange="readURL(this);" />
            </li>
            <li class="top-button">
                <i class="fa fa-save"></i>
                <button id="btnSave">Save image</button>
            </li>
        </ul>
    </header>
    <body>
        <ul class="side-bar">
            <hr width="199px" style="margin-top:0px;">
            <li class="side-button">
                <i class="fa fa-magic"></i> Effects
            </li>
            <hr width="199px">
            <li class="side-button">
                <i class="fa fa-volume-off"></i> Sounds
            </li>
            <hr width="199px">
            <li class="side-button">
                <i class="fa fa-image"></i> Select background
            </li>
            <hr width="199px">
        </ul>
        <img id="placeholder" src="#" alt="asdf" />
    </body>
</html>

I am not a fan of copy-pasting code, so I would like to understand what's going on

Does this answer your question? [How to make a simple image upload using Javascript/HTML](https://stackoverflow.com/questions/22087076/how-to-make-a-simple-image-upload-using-javascript-html) — King11, Nov 08 '19 at 21:34

score 1 · Accepted Answer · answered Nov 08 '19 at 22:12

With filereader:

HTML

<input type='file' onchange="readURL(this);" />
<img id="blah" src="http://placehold.it/180" alt="your image" />

CSS

img{
  max-width:180px;
}
input[type=file]{
padding:10px;
background:#2d2d2d;}

JS

function readURL(input) {
            if (input.files && input.files[0]) {
                const reader = new FileReader();

                reader.onload = function (e) {
document.querySelector('#blah').setAttribute('src',e.target.result )

                };

                reader.readAsDataURL(input.files[0]);
            }
        }

Here is an example on codepen for it.

How can I display a photo chosen through a html input in a div?

1 Answers1