input 里面的type="file"默认的按钮不够美观,有2种方法处理
1、自定义按钮并把<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
态不好处理。
2、使用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);
})
});
(adsbygoogle = window.adsbygoogle || []).push({});