在上传之前预览多个图像
Posted
技术标签:
【中文标题】在上传之前预览多个图像【英文标题】：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="#" />
不幸的是，无法正常工作！ 如何处理多张图片？
【问题讨论】：
使用所选图像的 src 循环添加图像标签 @SyedMehtabHassan，我更新了我的问题，请看一下。它不起作用。 【参考方案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>
【讨论】：
以上是关于在上传之前预览多个图像的主要内容，如果未能解决你的问题，请参考以下文章