在上传之前预览多个图像
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在上传之前预览多个图像相关的知识，希望对你有一定的参考价值。
我希望能够在上传之前预览多个图像，我找到解决方案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" />
不幸的是，没有工作！我怎么能用多个图像做到这一点？
答案
幸运的是，这将帮助您解决问题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>
以上是关于在上传之前预览多个图像的主要内容，如果未能解决你的问题，请参考以下文章