我们在做页面时有时候为了让上传这种类型的输入看起来更加美观，但是由于其自身往往是无法定义样式的，所以我们经常用按钮来 “替代” 它，接下来讲讲其原理和实践过程。原理：为了让input[type='file']看起来更像一个button，我们首先先采用绝对定位定义一个<a>标签，然后采用绝对定位在相同的位置定义一个和<a>大小完全相同的<input type='file'>，并把其透明度设置为0，最后再定义一个div显示上传的文件名即可。为了方便吧css直接写在html里，简要代码如下：
<!doctype html>
<html>
<head>
<style> * { margin: 0; padding: 0;
}
/*蓝色按钮,绝对定位*/ .blueButton { position: absolute; display: block; width: 100px; height: 40px; background-color: #00b3ee; color: #fff; text-decoration: none; text-align: center; font:normal normal normal 16px/40px 'Microsoft YaHei'; cursor: pointer; border-radius: 4px;
} .blueButton:hover { text-decoration: none;
}
/*自定义上传,位置大小都和a完全一样,而且完全透明*/ .myFileUpload { position: absolute; display: block; width: 100px; height: 40px; opacity: 0;
}
/*显示上传文件夹名的Div*/ .show { position: absolute; top:40px; width: 100%; height: 30px; font:normal normal normal 14px/30px 'Microsoft YaHei';
}
</style>
<script src="../jquery-3.1.0.min.js"></script>
<title>file自定义上传</title>
</head>
<body>
<a href='javascript:void(0);' class="blueButton">选择文件</a>
<input type="file" class="myFileUpload" />
<div class="show"></div>
</body>
</html>
<script> $(document).ready(function() { $(".myFileUpload").change(function() { var arrs=$(this).val().split('\\'); var filename=arrs[arrs.length-1]; $(".show").html(filename); }); }); </script>
这样生成的页面如下：
点击后页面如下：
这样就简单地实现了一个美化样式的input[type='file']，重点是这种思维模式很重要，对后面的图片上传也是类似思路。