我正在寻找一种用JavaScript上传和预览图片的方法,并找到了这篇文章:make simple image preview。现在,我是一个初学者JavaScript程序员,我想知道为什么当我试图将行document.querySelector('img[class='preview']');
更改为"document.getElementsByClass('preview')"
时,它不起作用。
从这个开始:
function filePreview() {
var preview = document.querySelector('img[class="preview"]');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function(){
preview.src = reader.result;
}
if(file){
reader.readAsDataURL(file);
}else{
preview.src = "";
}
}
到这个
function filePreview() {
var preview = document.getElementsByClassName("preview");
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function(){
preview.src = reader.result;
}
if(file){
reader.readAsDataURL(file);
}else{
preview.src = "";
}
}
HTML
<div class="uploadimg">
<input type="file" onchange="filePreview()"><br>
<img src="" height="300" class="preview" alt="Image preview"><br>
<img src="" height="200" class="preview" alt="2"><br>
<img src="" height="150" class="preview" alt="3">
</div>
我正在尝试做的是通过尝试将input:file给出的图像设置为所有三个图像源来进行3次预览(Big、Medium和Small
发布于 2018-06-19 05:33:23
它应该是:
document.getElementByClassName("preview");
这将总是返回一个对象数组,因此,如果您只有一个带有“DOMElement”类的预览,您将需要:
var preview = document.getElementByClassName("preview")[0];
您可以在此处阅读有关此方法的更多信息:https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
https://stackoverflow.com/questions/50916607
复制相似问题