inputLocalFont.addEventListener不是一个函数

inputLocalFont.addEventListener is not a function

本文关键字：一个 函数 addEventListener inputLocalFont      更新时间：2023-09-26

我用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也是可用的。

相关文章：