Preview an multiple images before it is uploaded

Question

I want to be able to preview a multiple images before it is uploaded, I found solution here that explane how to do that but for just single image.

I trying this :

function readURL(input)
{
    if (input.files && input.files[0])
    {
        for (var i = 0, f; f = files[i]; i++) {
            var reader = new FileReader();

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

            reader.readAsDataURL(f);
        }
    }
}

Also, change the input to multiple

<input type='file' multiple onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />

Unfortunately, not working ! How can I do this with multiple images?

@SyedMehtabHassan, I update my question please take a look. It does not work. — Abdulsalam Elsharif, Apr 14 '19 at 10:58

score 0 · Answer 1 · answered Apr 14 '19 at 11:19

With luck this will help you solve the issue 0 seems to work ok for me in test

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>multiple files preview</title>
    </head>
    <body>
        <form method='post' enctype='multipart/form-data'>
            <input type='file' name='images[]' multiple />
            <input type='submit' />
            <output></output>
        </form>
        <script>
            let out=document.querySelector('output');
            let oFile=document.querySelector('form > input[type="file"]');
            oFile.addEventListener('change', function(e){
                let oFiles=this.files;
                let oReader;
                for( i=0; i < oFiles.length; i++ ){
                    oReader = new FileReader();
                    oReader.addEventListener( 'load', e=>{
                        let img=new Image();
                            img.src=e.target.result;
                        out.appendChild( img )
                    });
                    oReader.readAsDataURL( oFiles[i] )
                }
            });
        </script>
    </body>
</html>

Preview an multiple images before it is uploaded

1 Answers1