在上传之前预览多个图像答案

【问题标题】：Preview an multiple images before it is uploaded在上传之前预览多个图像
【发布时间】：2019-09-04 13:29:21
【问题描述】：

我希望能够在上传多张图片之前预览它，我找到了解决方案here，它解释了如何做到这一点，但只针对一张图片。

我试试这个：

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);
        }
    }
}

另外，将输入更改为多个

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

不幸的是，无法正常工作！如何处理多张图片？

【问题讨论】：

使用所选图像的 src 循环添加图像标签
@SyedMehtabHassan，我更新了我的问题，请看一下。它不起作用。

标签： javascript php jquery file-upload

【解决方案1】：

如果运气好，这将帮助您解决问题 0 在测试中似乎对我来说可以正常工作

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

【讨论】：