首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js获取input上传文件的文件名和扩展名的方法

js获取input上传文件的文件名和扩展名的方法

作者头像
德顺
发布2019-11-13 17:25:31
12.8K0
发布2019-11-13 17:25:31
举报
文章被收录于专栏:前端资源前端资源

使用 js 可以获取 input 上传文件的文件名和扩展名,这里我整理一下具体方法:

1. 使用原生JS获取:

CSS代码:给 div 一个内边距,按钮设置样式。

div{
    padding: 5px;
}
#mybtn {
    width: 100px;
    height: 30px;
    font-size: 18px;
    background-color: #00a0e9;
    border: none;
    text-align: center;
    color: #FFF;
}

HTML代码:写一个input file 按钮,一个 button 按钮用来触发一个事件,一个 div 容器用来放提示信息。

<div>
    <input type="file" name="myfile" id="myfile" value=""/>
</div>
<div>
    <button id="mybtn">点击</button>
</div>
<div id="div">
</div>

JS代码:点击 button 按钮时触发事件,如果未选择任何文件会返回 undefined ,如果已选择文件 则返回文件名和扩展名。

<script>
    //获取一个上传文件的扩展名
    var myfile = document.getElementById('myfile');
    var mybtn = document.getElementById('mybtn');
    var div = document.getElementById('div');
    mybtn.onclick = function () {
        //获取文件上传文件的文件名和扩展名
        if (myfile.files[0] == undefined) {
            alert('未上传任何文件!');
        } else {
            //获取上传文件的文件名
            div.innerHTML= div.innerHTML+'<span style="color:#FF0000;">文件名:' + myfile.files[0].name + '</span><br>';
            //获取上传文件的扩展名
            var filevalue = myfile.value;
            var index = filevalue.lastIndexOf('.');
            div.innerHTML= div.innerHTML+'<span style="color:#FF0000;">扩展名:' + filevalue.substring(index) + '</span>';
        }
    }
</script>

测试效果如下图:

未上传任何文件:

已选择文件:

2. 使用 jQuery 获取:

CSS 和 HTML 部分代码没变,js 代码如下:我这次使用的是监听 input 的 change 事件,button 按钮可以删掉。

<script>
    $(function () {
        var file = "";
        var fileName = "";
        var fileExt = "";
        $("#myfile").change(function () {
            //获取文件的value值
            file = $("#myfile").val()
            //获取文件名+扩展名
            fileName = file.split("\\").pop();
            //获取文件名
            fileName = fileName.substring(0, fileName.lastIndexOf("."));
            //获取文件的扩展名
            fileExt = file.substr(file.lastIndexOf("."));
            //清空DIV容器内容
            $("#div").html("");
            $("#div").append("<p style='color: red'>文件名:"+fileName+"</p>");
            $("#div").append("<p style='color: red'>扩展名"+fileExt+"</p>");
        })
    });
</script>

效果如下图:

声明:本文由w3h5原创,转载请注明出处:《js获取input上传文件的文件名和扩展名的方法》 https://cloud.tencent.com/developer/article/1538508

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-04-26),如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档