很多人在實(shí)際的開發(fā)中都會(huì)用到input type=file的這個(gè)標(biāo)簽，然后就會(huì)開始吐槽，我的天，長這個(gè)樣怎么處理合適，今天給大家?guī)硪粋€(gè)原生改寫樣式的方法，希望能給大家?guī)韼椭?/p>
不帶任何改變的效果
這個(gè)原生真心丑
嘗試改變后的效果
簡單變樣之后
實(shí)現(xiàn)思路
先講講思路是如何，第一個(gè)就是用label標(biāo)簽，將for指向上傳的type=file的input標(biāo)簽，并且將input標(biāo)簽給隱藏。
<!--multiple的屬性是可以支持多個(gè)內(nèi)容一塊上傳-->
<input id="file" type="file" multiple>
<!--銅鼓label的指向，就可以用label替換input并且能夠有實(shí)現(xiàn)上傳功能-->
<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>簡單的美化這個(gè)控件</h1>
<fieldset>
<legend>美化上傳文件表單控件</legend>
<ul>
<li>為控件綁定 label 標(biāo)簽</li>
<li>隱藏這個(gè)丑陋的控件</li>
<li>美化綁定的 label 標(biāo)簽</li>
</ul>
</fieldset>
<fieldset>
<legend>獲取上傳文件的基本信息</legend>
<ul>
<li>HTML5，為 input 添加 multiple 特性，允許上傳多個(gè)文件</li>
<li>綁定 input 的 change 事件，動(dòng)態(tài)更改文件信息</li>
<li>獲取 FileList，HTMLInputElement.files</li>
<li>動(dòng)態(tài)寫入文件信息（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的內(nèi)置對象
let fileNum = file.files.length;
file.nextElementSibling.innerHTML = `選中 ${fileNum} 個(gè)文件`;
showFileInfo(fileNum);
};
function showFileInfo(num) {
let filelist = file.files;
let div = document.createElement('div');
for (let i = 0; i < num; i++) {
//pre就是可以保留計(jì)算機(jī)字符，不被解析
let pre = document.createElement('pre');
let item = filelist.item(i);
//字符串模板，類似于和拼接字符串相同效果，是es6的寫法
pre.innerHTML = `文件名：${item.name}\n文件大?。?{item.size}（字節(jié)）\n文件類型：${item.type}\n文件最后修改日期：${(new Date(item.lastModified).toLocaleString())}\n`;
div.appendChild(pre);
}
fileInfo.innerHTML = '';
fileInfo.appendChild(div);
}
</script>
</body>
</html>
