javascript - inputLocalFont.addEventListener不是函数

我用php和js编写了添加图像的代码，但是我的js出现了错误，它说


  inputLocalFont.addEventListener不是函数


这是我的代码：

<div>
    <img src="<?php echo $img_path.'/'.$img_name ?>" width="400px" height="400px"/>
    <ul class="add_img_ul">
        <li class="subimg"><input type="file" class="file" name="file"/><img id="add" src="icons/add.jpg" width="80px" height="80px"/></li>
    </ul>
    <script>
        var inputLocalFont = document.getElementsByClassName("file");
        inputLocalFont.addEventListener("change",previewImages,false);

            function previewImages(){
                var fileList = this.files;

                var anyWindow = window.URL || window.webkitURL;

                    for(var i = 0; i < fileList.length; i++){
                         var objectUrl = anyWindow.createObjectURL(fileList[i]);
                            $('.add_img_ul').append('<input type="file" class="file" name="file"/><img src="' + objectUrl + '" width="80px" height="80px"/>');
                            window.URL.revokeObjectURL(fileList[i]);
                    }
             }
     </script>
</div>

最佳答案

顾名思义，getElementsByClassName返回一个元素集合，而不仅仅是一个元素。如果要从集合中获取第一个元素，请使用索引0（[0]）对其进行索引。

var inputLocalFont = document.getElementsByClassName("file");
inputLocalFont[0].addEventListener("change",previewImages,false);
// -----------^^^

但是，如果您真的只想要第一个，则没有理由获得列表：querySelector将为您提供任何CSS选择器的第一个匹配项：

var inputLocalFont = document.querySelector(".file");
inputLocalFont.addEventListener("change",previewImages,false);

...并且它的优点是它可以在IE8（和所有现代浏览器）上运行，而getElementsByClassName在IE8上不起作用。对于您确实想要列表的时间，querySelectorAll也可用。

关于javascript - inputLocalFont.addEventListener不是函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32667502/