-2

I want to be able to have my user input an image into the webpage. As soon as they have imported the file from their computer the image should show in the img.

<body>
    <img id="myImage" height="200px" width="200px">
    <input type="file" id="ImageInput" oninput="changeImage()">
    <script>
        function changeImage(){
            //def each element involved
            imageBox=document.getElementById("myImage");
            inputBox=document.getElementById("ImageInput");

            //set link from input box to image box link
            console.log(inputBox.files[0])
            imageBox.setAttribute("src",inputBox.files[0].name);
        }
    </script>
</body>

This code fails to find the image imported and so does nothing and pulls the error ERR_FILE_NOT_FOUND.

Currently i think its just trying to find the file locally and failing as it is not in the local directory but im unsure.

Max.C
  • 1
  • 4

1 Answers1

0

setting the name will not work. this.files[0].mozFullPath try this to set the correct file path

Viroj Fernando
  • 435
  • 4
  • 8