南昌市，做网站的公司/阳泉seo
遇到修改上传文件的样式兼容IE8并实现获取到上传文件的名称并进行排列展示的问题，
实现的思路大概是将input的透明度设为0，绝对定位盖在已写好样式的标签上面，由于要上传多文件，要在input的属性中加上multiple="multiple"，而事件要在input域内容发生改变时触发，因此使用onchange()事件，具体实现的效果如下：
image.png
html代码
选择文件 > 未选择任何文件
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不是最后一个文件时，在名称后添加'、'，最后一个文件后不添加，实现的效果如下：
image.png
js代码
//选择文件获取文件名称
function getfilename(el){
var _el = el.files;
var _name = "";
for(var i=0;i<_el.length>
if(i==_el.length-1){
_name += _el[i].name
}else{
_name += _el[i].name+'、'
}
$('.upload span').html(_name);
}
}