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. — , Apr 15 '20 at 22:49
Does this answer your question? [What's the difference between using "let" and "var"?](https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var) — , Apr 16 '20 at 07: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, Apr 17 '20 at 03:22

score 0 · Answer 1 · answered Apr 15 '20 at 22:59

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 '20 at 22:59

H.T

130
11

score 0 · Answer 2 · answered Apr 15 '20 at 23:20

<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.

JavaScript loading multiple images using For Loop not working

2 Answers2