修改 input type=file 的樣式

頁面Html

 <a href="javascript:;" class="file"><span id="filename">選擇文件</span>
    <input type="file" name="picture" id="picture">
 </a>

CSS

 .file {
            position: relative;
            background: rgb(244,255,251);
            border: 1px solid #00D6A3;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #00D6A3;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
            margin-left: 20px;
            cursor: pointer;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            cursor: pointer;
        }
        .file:hover {
            background:  #00D6A3;
            border-color:  #00D6A3;
            color: #ffffff;
            text-decoration: none;
            cursor: pointer;
        }

選中文件獲取名字

 $(".file").on("change","input[type='file']",function(){
            var filePath=$(this).val();
                var arr=filePath.split('\\');
                var fileName=arr[arr.length-1];
                $("#filename").html(fileName);
    })