JavaScript loading multiple images using For Loop not working

Question

Here is the script. It only loads the last image for some reason. I know it is missing something simple but I just don't know where. I am a newbie to JS. Thanks guys.

        <html>
        <body>
            <div style="display:flex ">
                <div style="border:1px solid black"><img id="img0" height="180px">img0</div>
                <div style="border:1px solid black"><img id="img1" height="180px">img1</div>
                <div style="border:1px solid black"><img id="img2" height="180px">img2</div>
            </div>
        <form action="" method="post" enctype="multipart/form-data">
            <label>Select Image Files:</label>
            <input type="file" name="image[]" onchange="onFileSelected(event)"  multiple />
            <input type="submit" name="submit" value="Upload">
        </form>
        <script>
        function onFileSelected(event) {
            for (i = 0; i < event.target.files.length; i++) {
                var selectedFile = event.target.files[i];
                var reader = new FileReader();

                var imgfile = 'img' + i;
                var imgtag = document.getElementById(imgfile);
                alert(imgtag);
                //imgtag.title = selectedFile.name;

                reader.onload = function(event) {
                    imgtag.src = event.target.result;
                };

                reader.readAsDataURL(selectedFile);
            }
        }
        </script>
        </body>
        </html>

You have a single reader variable which keeps getting overwritten. Use let instead of var, or an array of FileReaders. — user5734311
– user5734311, Commented Apr 15, 2020 at 22:49
Does this answer your question? What's the difference between using "let" and "var"? — user5734311
– user5734311, Commented Apr 16, 2020 at 7:00
I narrowed it down to changing only one line from VAR imgtag to LET imgtag. Based on my readings, LET is block variable, any changes made inside block { } does not affect the variable value outside the block { }. But outside changes made to the variable changes the value inside the block. By using LET, imgtag.src would not be overwritten each time. It makes logical sense why my original script always displayed the last image. — Justin
– Justin, Commented Apr 17, 2020 at 3:22

H.T · Accepted Answer · 2020-04-15 22:59:25Z

0

Your problem is back to FileReader function.FileReader is I/O process and have delay. if you want use FileReader you must use await/sync function.you can see this link and read this document about FileReaderSync .

answered Apr 15, 2020 at 22:59

H.T

13011 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

EWR · Accepted Answer · 2020-04-15 23:20:09Z

<html>

<body>
    <div style="display:flex ">
        <div style="border:1px solid black"><img id="img0" height="180px">img0</div>
        <div style="border:1px solid black"><img id="img1" height="180px">img1</div>
        <div style="border:1px solid black"><img id="img2" height="180px">img2</div>
    </div>
    <form action="" method="post" enctype="multipart/form-data">
        <label>Select Image Files:</label>
        <input type="file" name="image[]" onchange="onFileSelected(this)" multiple />
        <input type="submit" name="submit" value="Upload">
    </form>
    <script>
        function onFileSelected(event) {
            for (let i = 0; i < event.files.length; i++) {
                let selectedFile = event.files[i];
                let reader = new FileReader();

                let imgtag = document.getElementById('img' + i);

                reader.onload = function (readerEvent) {
                    imgtag.src = readerEvent.target.result;
                };

                reader.readAsDataURL(selectedFile);
            }
        }
    </script>
</body>

</html>

This should definitely work. Try to use let or const instead of var.

Collectives™ on Stack Overflow

JavaScript loading multiple images using For Loop not working

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related