修改文件上传样式 实现文件列表功能

修改文件上传的样式

修改思路是让一个按钮替代原来的样式。点击按钮和点击原来的选择文件元素是一样的效果。我们可以考虑让input的父级元素相对定位，然后让input元素绝对定位，并且可见度为0，就是看不见，但是点击也能出现选择文件的效果，input元素再增加一个兄弟节点，就是我们说的按钮，选择文件对外显示按钮样式效果。

html代码：
<form id="contractMessage" enctype="multipart/form-data">
div class="upload-btn">
                  <input type="file" name="singleFile" class="file-ele" multiple="multiple">
                  <div class="file-open">上传文件</div>
               </div>
</form>
css代码：
.upload-btn {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border:1px solid #2d78f4;
    border-radius: 3px;
    vertical-align: middle;
}
.upload-btn .file-ele{
    position: absolute;
    top:0;
    right:0;
    opacity: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
}
.upload-btn .file-open {
    width:90px;
    height:25px;
    line-height:25px;
    text-align: center;
    color:#fff;
    background: #3385ff;
}

自制文件列表

思路：创建文件列表容器，文件上传的时候 获取文件名 将文件名添加到文件列表容器中

<div class="fileerrorTip" style="padding-left:65px;"></div>
 <div class="showFileName">
               <ul></ul>
 </div>
 使用change事件获取文件上传时候的文件名：
 js代码：
 var $contractForm = $("#contractMessage")
 var $uploadFile = $('[name="singleFile"]', $contractForm)
 var files = []//文件流数组 用以保持文件流数组和文件列表容器中的文件一致性
      $uploadFile.on('change',function(){
            $(".fileerrorTip").html("").hide();
            var filePath = $(this).val()
            var fileSize = this.files[0].size
            var arr=filePath.split('\\')
            var fileName=arr[arr.length-1]
            var flag = false
            $(".showFileName ul li").each(function(i,ele){
                  if($(ele).text() === fileName){
                        flag = true                       
                        return false
                  }
            })
            if(flag){
                  $(".fileerrorTip").html(fileName+"文件已存在！").show()
                  return
            }
            if(fileSize>50*1024*1024){
                  $(".fileerrorTip").html("上传文件最大为50M，您上传的文件大小超过限制！").show(); 
                  return false
            }else{
                  $('.showFileName ul').append($('<li style="line-height:20px;width:250px;padding-left:15px;position:relative;margin-bottom:5px;">'+fileName+'<i class="fa fa-times-circle deleteFile" aria-hidden="true" style="font-size:12px;position:absolute;top:5px;right:10px;display:none;"></i></li>'))
                  $(".fileerrorTip").html("").hide();
                  files.push(this.files[0]) 
                  $(this).val("")//清空input = file的值用来控制每次点击上传都能触发change事件
            }

      })
      $(".showFileName ul").on('mouseover','li',function(){//鼠标移入li显示背景色和图标
            $(this).css('backgroundColor','#DCDCDC')
            $(this).children('i').css('display','block')
      })
      $(".showFileName ul").on('mouseout','li',function(){
            $(this).css('backgroundColor','')
            $(this).children('i').css('display','none')
      })
      $(".showFileName ul").on('click','.deleteFile',function(){//删除li同时删除相应的文件流
            $(".fileerrorTip").html("").hide(); 
            var deleteFileName = $(this).parent('li').text()
            files.forEach(function(curval,index){
                  if(curval.name===deleteFileName){
                  files.splice(index,1)
            }
            })
            $(this).parent('li').remove()
      })