在下一个img标记Javascript中查看图像

Question

我想预览输入后img标记中的图像
my Html

<input name="image" type="file"  id="uploadImage"  onchange="PreviewImage(this);" />
<img id="uploadPreview" style="width: 100px; height: 100px;" />

我的JS

function PreviewImage(input) {
if (input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var imageObj=input.next();
consolde.log(imageObj);
input.next('img').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}

但我得到了错误组合：766未捕获类型错误：input.next不是函数

Answer 1

HTML

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">  

JS-

function previewFile() {
const preview = document.querySelector('img');
const file = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();
reader.addEventListener("load", function () {
// convert image file to base64 string
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}

来源：MDN