jq监听input type="file"发生改变，即选择文件,并获取文件名称

最新推荐文章于 2023-05-22 19:36:02 发布

沉、睡

最新推荐文章于 2023-05-22 19:36:02 发布

阅读量2.9k

点赞数

文章标签： linux java python vue css

本文链接：https://blog.csdn.net/zz975896590/article/details/119990839

版权

这篇博客介绍了如何利用JavaScript监听HTML中input type='file'元素的变化，当用户选择文件后，获取并显示所选文件的名称。示例代码展示了通过onchange事件处理函数实现这一功能，当有文件被选择时，文件名会显示在页面的特定区域；当没有文件时，文件名区域则会被清空。

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

jq监听input type="file"发生改变，即选择文件,并获取文件名称

<input  id="fileupload" name="file" onchange="fileChange(event)" style="display: none" type="file"/>


function fileChange(e) {
        console.log(e);
        var e = e || window.event;
        //获取 文件 个数 取消的时候使用
        var files = e.target.files;
        if(files.length>0){
            // 获取文件名 并显示文件名
            var fileName = files[0].name;
            $(".filename").text(fileName);
        }else{
            //清空文件名
            $(".filename").text("");
        }
}