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

最新推荐文章于 2024-03-30 18:24:20 发布

weixin_34254823

最新推荐文章于 2024-03-30 18:24:20 发布

阅读量236

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/2612473/blog/1305419

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/u/2612473/blog/1305419