很多人在实际的开发中都会用到input type=file的这个标签，然后就会开始吐槽，我的天，长这个样怎么处理合适，今天给大家带来一个原生改写样式的方法，希望能给大家带来帮助
不带任何改变的效果
这个原生真心丑
尝试改变后的效果
简单变样之后
实现思路
先讲讲思路是如何，第一个就是用label标签，将for指向上传的type=file的input标签，并且将input标签给隐藏。
<!--multiple的属性是可以支持多个内容一块上传-->
<input id="file" type="file" multiple>
<!--铜鼓label的指向，就可以用label替换input并且能够有实现上传功能-->
<label for="file">请选择文件</label>
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>美化控件 & 获取上传文件的基本信息</title>
<style>
* {
margin: 0;
padding: 0;
}
h1 {
font-size: 2em;
font-weight: bolder;
color: red;
text-align: center;
}
fieldset {
width: 80%;
margin: 30px auto;
padding: 20px;
}
fieldset legend {
color: blue;
font-size: 1.3em;
font-weight: bold;
}
fieldset ul {
margin-left: 30px;
}
fieldset li {
line-height: 1.8;
color: #666;
}
.container {
width: 500px;
height: 300px;
margin: 20px auto;
padding: 10px;
border: 1px solid #888;
overflow: auto;
}
input[type=file] {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
label[for=file] {
display: block;
width: 150px;
height: 40px;
margin: auto;
line-height: 40px;
text-align: center;
border-radius: 5px;
font-size: 1.25em;
font-weight: 700;
color: white;
background-color: #888;
transition: 0.5s;
}
label[for=file]:hover {
background-color: #666;
cursor: pointer;
}
pre {
font-size: 14px;
line-height: 1.4;
color: #333;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>简单的美化这个控件</h1>
<fieldset>
<legend>美化上传文件表单控件</legend>
<ul>
<li>为控件绑定 label 标签</li>
<li>隐藏这个丑陋的控件</li>
<li>美化绑定的 label 标签</li>
</ul>
</fieldset>
<fieldset>
<legend>获取上传文件的基本信息</legend>
<ul>
<li>HTML5，为 input 添加 multiple 特性，允许上传多个文件</li>
<li>绑定 input 的 change 事件，动态更改文件信息</li>
<li>获取 FileList，HTMLInputElement.files</li>
<li>动态写入文件信息（File 对象）</li>
</ul>
</fieldset>
<div class="container">
<div class="upload-file">
<input id="file" type="file" multiple>
<label for="file">请选择文件</label>
<div class="file-info"></div>
</div>
</div>
<script>
let file = document.getElementById('file');
let fileInfo = document.getElementsByClassName('file-info')[0];
file.onchange = function() {
//.files是type-file的内置对象
let fileNum = file.files.length;
file.nextElementSibling.innerHTML = `选中 ${fileNum} 个文件`;
showFileInfo(fileNum);
};
function showFileInfo(num) {
let filelist = file.files;
let div = document.createElement('div');
for (let i = 0; i < num; i++) {
//pre就是可以保留计算机字符，不被解析
let pre = document.createElement('pre');
let item = filelist.item(i);
//字符串模板，类似于和拼接字符串相同效果，是es6的写法
pre.innerHTML = `文件名：${item.name}\n文件大小：${item.size}（字节）\n文件类型：${item.type}\n文件最后修改日期：${(new Date(item.lastModified).toLocaleString())}\n`;
div.appendChild(pre);
}
fileInfo.innerHTML = '';
fileInfo.appendChild(div);
}
</script>
</body>
</html>
网友评论