本文介绍如何使用原生JavaScript实现一个简洁的文件上传组件。通过隐藏原生input并自定义样式，解决默认按钮美观度不足的问题。功能涵盖图片格式限制、文件名显示及上传后的图片缩略图实时预览，提供完整的HTML、JS和CSS代码示例。
引言与背景
前言
开发此工具库的初衷在于，浏览器默认提供的文件上传按钮样式较为简陋，且难以直接通过CSS修改其外观。因此，决定封装一个轻量级的组件，以便在未来的项目中复用。该组件完全基于原生JavaScript编写。以下是最终的效果展示。
功能需求分析
主要实现的功能包括：
- 展示上传的图片缩略图
- 限制允许上传的文件格式
功能预览效果如下图所示：
代码实现细节
具体代码实现如下：
HTML结构
HTML结构代码：
<html>
<head>
<meta charset="utf-8" />
<title>uploalFileButton</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="file-container">
<div class="file-box">
<input type="file" class="file-btn" accept="image/png,image/jpeg,image/gif" id="file" />
<text>选择文件</text>
</div>
<span id="showFileName"></span>
<span id="fileerrorTip"></span>
<div class="show_image">
<img src="" id="file_img" />
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>JavaScript逻辑
JavaScript逻辑代码：
(function(){
var fileBtn = document.getElementById('file');
var showName = document.getElementById('showFileName');
var errorTip = document.getElementById('fileerrorTip');
var fileImg = document.getElementById('file_img');
fileBtn.onchange = function(){
try{
var fileName = this.files[0].name;
// 限制图片上传类型
if(fileName.indexOf("jpg") != -1 || fileName.indexOf("png") != -1) {
errorTip.innerHTML = "";
showName.innerHTML = fileName;
//显示预览图片
var file = this.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function(e) {
fileImg.src = e.target.result;
fileImg.style["display"] = "unset";
};
} else {
showName.innerHTML = "";
errorTip.innerHTML = "您未上传文件，或者您上传文件类型有误！";
return false
}
}catch(e){}
}
})()CSS样式设计
CSS样式代码：
.file-container{
display: inline-block;
}
.file-box{
display: inline-block;
position: relative;
padding:8px 25px;
overflow: hidden;
color:#fff;
background-color: #4387CD;
border-radius: 5px;
cursor: pointer;
vertical-align: bottom;
}
.file-btn{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
outline: none;
filter:alpha(opacity=0);
opacity: 0;
}
#showFileName, #fileerrorTip{
vertical-align: bottom;
}
.show_image{
width: 100px;
padding: 5px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
.show_image img{
display: none;
width: 100px;
}以上内容即为本文的全部介绍，希望能为读者提供有益的帮助。同时也欢迎大家继续支持本站的其他技术分享。