Question

我希望能够在上传多张图像之前进行预览，我发现解决方案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" />

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

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

预览多张图片，然后再上传

1 个答案: