修改input[type='file']默认样式，并显示传入多文件时的文件名_input upload 默认展示已上传的文件名-优快云博客

本文链接：https://blog.youkuaiyun.com/GuCheng_5/article/details/81026346

本文介绍了一种在IE8浏览器上实现多文件上传并兼容现代浏览器的方法。通过设置input透明度并使用absolute定位覆盖样式，结合multiple属性与onchange事件，实现了文件名的获取与展示功能。

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

遇到修改上传文件的样式兼容IE8并实现获取到上传文件的名称并进行排列展示的问题，

实现的思路大概是将input的透明度设为0，绝对定位盖在已写好样式的标签上面，由于要上传多文件，要在input的属性中加上multiple="multiple"，而事件要在input域内容发生改变时触发，因此使用onchange()事件，具体实现的效果如下：

html代码

<a href="javascript:void(0);" class="upload">选择文件 > <span>未选择任何文件</span>
     <input class="replyFileid" type="file" multiple="multiple"  onchange="getfilename(this);"/>
</a>

css代码

.upload{
    padding: 4px 10px;
    height: 20px;
    line-height: 20px;
    position: relative;
    text-decoration: none;
    color: #4d90d3;
    cursor: pointer;
}
.replyFileid{
    width:100%;
    position: absolute;
    overflow: hidden;
    right: 0;
    top: 0;
    filter:alpha(opacity=0);
    -moz-opacity:0;
    -khtml-opacity: 0;
    opacity: 0;
    cursor: pointer;
}
.upload span{
    color:#999;
    cursor: pointer;
}

为实现获取上传文件的名字，在网上找到了下面的代码，

先获取input的value值，然后得到文件完整路径后获取到路径中最后一个\的位置索引，索引+1后获取到\后面文件的索引，使用sbustring()函数提取字符串中介于两个指定下标之间的字符，但函数默认只给了开始的下标，因此我们要传入结束的下标，即文件的索引，最后赋值给我们模拟显示文件名称的标签，如截取文件完整路径D:\img\abc.jpg中最后一个\后面的abc.jpg。

但这么写只能应用在上传单文件的情况下，上传多文件时获取到的Input的value值始终是第一个文件的名字，无法多名称展示，

function getfilename() {
    var file = $(".replyField").val();
    var pos = file.lastIndexOf("\\");
    var _name  = file.substring(pos + 1);
    $('.upload span').html(_name);
}

因此修改了代码，使用文件的files属性，在调试区console.log后发现name属性中显示了文件名称，因此循环文件的个数，当i不是最后一个文件时，在名称后添加'、'，最后一个文件后不添加，实现的效果如下：

js代码

//选择文件获取文件名称
    function getfilename(el){
        var _el = el.files;
        var _name = "";
        for(var i=0;i<_el.length;i++){
            if(i==_el.length-1){
                _name += _el[i].name
            }else{
                _name += _el[i].name+'、'
            }
            $('.upload span').html(_name);
        }
    }