file的onChange事件的添加

jiang_mingyi

于 2018-05-22 13:13:25 发布

阅读量1.1w

点赞数 1

分类专栏：前端开发日记文章标签： file

本文链接：https://blog.csdn.net/jiang_mingyi/article/details/80404323

版权

前端开发日记专栏收录该内容

29 篇文章

订阅专栏

本文探讨了在HTML中为type=file的input元素添加onChange事件时遇到的问题：上传文件后事件失效。文章分析了问题产生的原因，并提供了解决方案：通过给父元素添加事件监听来替代直接对input元素的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给type为file的input直接添加onChange事件存在一个问题：在上传后一个文件后，事件失效。
原因：上传后一个文件后，元素input会被重构，给之前元素添加的响应事件自然就失效了。
解决方案：给其父元素添加事件监听。
html：

<div class="parent">
    <input type="file" class="file">
</div>
$(".parent").on("change",".file",function(){
        var filePath=$(this).val();
        if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){
           ....
        }else{
           ....
        }
    });