通过上图我们可以看到input type=file按钮的默认样式，非常不美观，如果要自定义该按钮的样式，要如何实现呢？
input覆盖整个按钮区域，并且设置完全透明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
position: relative;
width: 100px;
height: 100px;
line-height: 100px;
background-color: #ccc;
text-align: center;
}
#file {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
</style>
</head>
<body>
<div>
选取图片
<input type="file" accept="image/*" id="file">
</div>
</body>
</html>
input隐藏，通过label设置按钮样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
line-height: 100px;
background-color: #ccc;
text-align: center;
}
#file{
display: none;
}
label {
display: block;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div>
<input type="file" accept="image/*" id="file">
<!-- 将label与input建立关系，点击label等于点击了input -->
<label for="file">选取图片</label>
</div>
</body>
</html>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
// input选取文件后会触发change事件
$('#file').on('change', function(event) {
console.log(event.target.files) //选取的文件对象数组
// 通过FileReader读取文件对象信息
var reader = new FileReader()
reader.onload = function(e) {
var img = new Image()
img.src = e.target.result //读取结果会转为base64数据格式
img.style.width = '200px'
document.body.appendChild(img)
}
reader.readAsDataURL(event.target.files[0])
})
})
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.file {
width: 100px;
height: 100px;
line-height: 100px;
background-color: #ccc;
text-align: center;
}
</style>
</head>
<body>
<div class="file">
选取图片
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$('.file').on('click', function() {
// 动态创建input元素，type为file，样式为隐藏，并追加到body中
var input = $('<input/>')
input.prop('type', 'file')
input.css('display', 'none')
$('body').append(input)
// 监听选取文件触发的change事件
input.on('change', function(event) {
console.log(event.target.files) //选取的文件对象数组
// 通过FileReader读取文件对象
var reader = new FileReader()
reader.onload = function(e) {
var img = new Image()
img.src = e.target.result //读取结果会转为base64数据格式
img.style.width = '200px'
document.body.appendChild(img)
}
reader.readAsDataURL(event.target.files[0])
// 完成选取文件后，从dom中自我删除
input.remove()
})
// 自动触发click事件去选取文件
input.click()
})
})
</script>
</body>
</html>
中设置两种不同的字体大小