js实现上传按钮并显示缩略图小轮子
时间：2021-01-10 11:06:22|栏目：JavaScript代码|点击： 次
前言
造这个小轮子的起因是因为默认提供的上传文件的按钮属实丑陋了点，而且还不能直接修改这个按钮的样式，所以就打算直接搞个小轮子方便日后需要时使用。使用原生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常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
栏 目：JavaScript代码
下一篇：JavaScript遍历table表格中的某行某列并打印其值
本文标题：js实现上传按钮并显示缩略图小轮子
本文地址：http://www.codeinn.net/misctech/43196.html
