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>

“width=“400px”height=“400px”/>



var inputLocalFont=document.getElementsByClassName（“文件”）；
inputLocalFont.addEventListener（“更改”，预览图像，false）；
函数previewImages（）{
var fileList=this.files；
var anyWindow=window.URL | | window.webkitURL；
对于（var i=0；i

getElementsByClassName

，顾名思义，返回元素的集合，而不仅仅是一个元素。如果要从集合中获取第一个元素，请使用索引0（

[0]

）将其索引到其中

但是，如果您真的只想要第一个，那么没有理由得到一个列表：

querySelector

将为您提供任何CSS选择器的第一个匹配项：

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

…它的优点是它可以在IE8（以及所有现代浏览器）上运行，而

getElementsByClassName

不能在IE8上运行。如果确实需要列表，也可以使用

querySelectorAll

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