html type 样式修改,input type=file样式修改，并提示文件名(转载)

遇到修改上传文件的样式兼容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);

}

}