专栏首页前端资源js获取input上传文件的文件名和扩展名的方法

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

使用 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://www.w3h5.com/post/89.html

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • swiper宽度超出后自动适应的tab关联切换导航

    声明:本文由w3h5原创,转载请注明出处:《swiper宽度超出后自动适应的tab关联切换导航》 https://www.w3h5.com/post/399.h...

    德顺
  • 使用 swiper 轮播插件遇到的问题及解决方法

    我只是记录一下我在使用过程中遇到的几个属性,详细API大家可以直接去官网查看:Swiper4.x使用方法

    德顺
  • SuperSlide轮播插件滚动高度或宽度不对的问题解决

    SuperSlide 是一款比较实用的轮播插件,网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等都能实现,兼容包括 IE6 的绝大部分...

    德顺
  • [前端][css]float left布局换行不正常问题

    最近遇到一个页面布局上的问题,后来模拟了一下还原了下出现的原因。本来大概想实现的布局大概是这样的

    Tuzei
  • flex 布局

    CSS3 为我们提供了一种可伸缩的灵活的 web 页面布局方式 flexbox 布局,它具有很强大的功能,可以很轻松实现很多复杂布局。可以简便、完整、响应式地实...

    柳醉梦声
  • 一起学爬虫——使用xpath库爬取猫眼电

    之前分享了一篇使用requests库爬取豆瓣电影250的文章,今天继续分享使用xpath爬取猫眼电影热播口碑榜

    用户2398817
  • HTML规范 - 整体结构

    申霖
  • 零基础html5+div+css+js网页开发教程第006期 网页快速开发技巧

    上一节,我们学习了hbuilder的快速开发工具的简单实用,本机额,我们来介绍这个工具相关的快速开发技巧。

    刘金玉编程
  • Vue有什么特性,相对于其他框架都有那些优势!

    Vue所提供的一些相对高级的特性,表单操作,自定义指令,计算属性,过滤器,侦听器,生命周期。

    达达前端
  • WebMagic爬取指定内容和一些特性介绍(附演示代码)

    可能有很多小伙伴不了解Xpath语法是什么,我就给大家稍微介绍下,想要了解更多可以百度或者后台联系我,XPath 是一门在 XML 文档中查找信息的语言。XPa...

    框架师

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动