type="file"按鈕美化及獲取路徑

input 裏面的type="file"默認的按鈕不夠美觀，有2種方法處理

一、自定義按鈕並把<input type="file">定位在按鈕的上面，並設置透明度爲0，以下代碼

<div class="file-input">
    <button class="btn btn-primary file-inner-btn">
        文件上傳
        <i class="ion-ios-cloud-upload-outline"></i>
    </button>
    <input type="file" capture="camera" accept="image/*" name="logo" id="file">
</div>

.file-input {
     position: relative;
     width: 100px;
 }

 .file-input button {
     width: 100%;
     height: 28px;
     line-height: 28px;
     color: #fff;
     background: #0fd5d3;
     border: none;
 }

 .file-input button:hover {
     background: #07b9b7;
 }

 .file-input button:focus {
     outline: none;
 }

 .file-input input {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
 }

可是這種方法樣式很差控制，按鈕的hover態以及active態很差處理。

二、使用label標籤關聯input

<label class="button" for="xFile">上傳文件</label>
<input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);">
		<!-- clip 是對絕對定位進行裁剪，其他的地方默認隱藏rect(top,right,bottom,left),rect的參數都是距離左邊或者上邊的距離，如top與bottom是距離位裁剪前上面的距離，left與right距離左邊的距離 -->

.file-input .button{display:block;width:100%;height:28px;line-height:28px;color:#fff;background:#0fd5d3;border:none;text-align:center;cursor:pointer;}

若是咱們把選中的文件路徑賦值給另外一個div

<td id="fileAddress"></td>
<td><input type="file" id="fileinput"  style="width:75px;overflow:hidden;"/></td>

$(function () {
	    $("#fileinput").change(function(){
		 var file = $("#fileinput").val();
		 var filename=getFileName(file);
		 function getFileName(o){
		   var pos=o.lastIndexOf("\\");
		   return o.substring(pos+1); 
		 }
		 $("#fileAddress").html(filename);
		 
		})
	    
	});