获取input type=file的文件名及input type=file获取文件名的浏览器,设置input type=file样式

最新推荐文章于 2022-08-29 13:48:25 发布

麦兜_冰夕

最新推荐文章于 2022-08-29 13:48:25 发布

阅读量1w

点赞数 2

分类专栏： WEB前端浏览器兼容问题 CSS3 文章标签：获取input type=file的文件名设置input type=file样式 input type=file样式浏览器兼容文件名截取文件批量上传

本文链接：https://blog.csdn.net/lyn1772671980/article/details/80054474

版权

WEB前端同时被 3 个专栏收录

66 篇文章 1 订阅

订阅专栏

浏览器兼容问题

35 篇文章 1 订阅

订阅专栏

CSS3

23 篇文章 1 订阅

订阅专栏

获取input type=file的文件名方法：

let filePath = $("input[type = 'file']").val(); //获取路径

let urlArr = filePath.split("\\"); //以反斜杠'\'截取文件名为数组

let fileName = urlArr[urlArr.length-1]; //获取文件名

input type=file在个浏览器中样式各不相同，如下图所示：

若要统一样式，可将原有样式设置属性 opacity: 0,布局上用定位position：relative/absolute实现，实现效果如下：

具体实现代码如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script src="./d3/jquery-1.12.0.min.js"></script>
    <style>
        .fileIpt {
            width: 423px;
            height: 30px;
        }
        input {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .label-text[for = "inputDataBackup1"] {
            color: #0e0e0e;
            padding: 5px 20px 6px 20px;
            margin-bottom: 0px;
            font-weight: 500;
            background: #2fc8f6;
            border-radius: 3px 0px 0px 3px;
            -webkit-border-radius: 3px 0px 0px 3px;
            -moz-border-radius: 3px 0px 0px 3px;
            font-size: 14px;
            vertical-align: middle;
            text-align: center;
        }
        #inputDataBackup1 {
            width: 268px;
            height: 30px;
            background: transparent;
            position: relative;
            display: inline-block;
            margin-left: -6px;
            padding: 1px 0px 0px 0px;
            color: #57D1F7;
            text-align: center;
            vertical-align: middle;
            border: 2px solid #2fc8f6;
            border-radius: 3px;
            -webkit-border-radius: 3px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
      .selectFile {
          position: absolute;
          left: 0;
          top: -1px;
          z-index: 3;
          height: 30px;
          width: 268px;
          opacity: 0;
      }
    .errTip {
          position: absolute;
          top: 20px;
          left: 50%;
          margin-left: -90px;
          color: red;
          font-size: 12px;
      }
    .fileName {
          width: 210px;
          height: 30px;
          position: absolute;
          left: 0;
          top: -2px;
          z-index: 1;
          color: #000;
          text-align: center;
          background-color: transparent;
          border-color: transparent;
          overflow: hidden;
          text-overflow: ellipsis;
      }
    .path {
          width: 55px;
          height: 30px;
          background-color: #2fc8f6;
          display: inline-block;
          position: absolute;
          top: -2px;
          right: 0;
          z-index: -1;
          text-align: center;
          vertical-align: middle;
          border-radius: 0px 3px 3px 0px;
          -webkit-border-radius: 0px 3px 3px 0px;
          -moz-border-radius: 0px 3px 3px 0px;
      }
      .pathText {
          display: inline-block;
            font-size: 12px;
            line-height: 30px;
            color: #fff;
            letter-spacing: 3px;
      }
    </style>
</head>
<body>
    <div class="fileIpt">
      <label class="label-text" for="inputDataBackup1">选择文件</label>
      <div id="inputDataBackup1" class="input-selectStyle">
        <input class="selectFile" type="file" multiple="multiple" title="未选择任何文件">
        <p class="errTip"></p><input class="fileName" readonly="readonly">
        <div class="path">
          <span class="pathText">上传</span>
        </div>
      </div>
    </div>
    <script type="text/javascript">
        $(".selectFile").on("change",function(){
            console.log($(this))
            var filesNum = $('.selectFile')[0].files.length;
            if(filesNum > 1){
                var fileTiltle = [];
                for(var i = 0 ;i<filesNum;i++){
                    var file=$('.selectFile')[0].files[i];
                    console.log(file.name);
                    fileTiltle.push(file.name)
                }
                $(".fileName").val(fileTiltle.join(","));
                $(this).attr("title",filesNum+'个文件');
            }else if(filesNum == 1){
                var filePath = $(this).val();
                var urlArr = filePath.split("\\");
                var fileName = urlArr[urlArr.length-1];
                $(".fileName").val(fileName);
                $(this).attr("title",fileName);
            }
        
        if(fileName == "") {
            $(".errTip").html("请选择上传文件");
        }else{
            $(".errTip").html("");
        }
    })
    </script>
</body>
 
</html>

麦兜_冰夕

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
获取input type=file的文件名及input type=file获取文件名的浏览器,设置input type=file样式

获取input type=file的文件名方法：let filePath = $("input[type = 'file']").val(); //获取路径let urlArr = filePath.split("\\"); //以反斜杠'\'截取文件名为数组 let fileNam...
复制链接

扫一扫