html代码

<a href="javascript:void(0);" class="upload">选择文件 > <span>未选择任何文件</span>
     <input class="replyFileid" type="file" multiple="multiple"  onchange="getfilename(this);"/>
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不是最后一个文件时，在名称后添加'、'，最后一个文件后不添加，实现的效果如下：