type="file"按钮美化及获取路径 原

<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;
 }

<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;}

<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);
		 
		})
	    
	});