这篇文章主要讲解了js实现上传按钮并显示缩略图小轮子的方法，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。
前言
造这个小轮子的起因是因为默认提供的上传文件的按钮属实丑陋了点，而且还不能直接修改这个按钮的样式，所以就打算直接搞个小轮子方便日后需要时使用。使用原生js实现。那么直接上效果图。
实现功能：
预览效果图如下
代码实现
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代码
(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代码
.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;
}看完上述内容，是不是对js实现上传按钮并显示缩略图小轮子的方法有进一步的了解，如果还想学习更多内容，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
