纯js实现上传按钮并显示缩略图小轮子

最新推荐文章于 2024-06-11 17:10:29 发布

Lewalker59

最新推荐文章于 2024-06-11 17:10:29 发布

阅读量230

点赞数

分类专栏：前端学习笔记文章标签： javascript css3 html5

本文链接：https://blog.csdn.net/weixin_43188432/article/details/105893037

版权

前端学习笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

前言

造这个小轮子的起因是因为默认提供的上传文件的按钮属实丑陋了点，而且还不能直接修改这个按钮的样式，所以就打算直接搞个小轮子方便日后需要时使用。使用原生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;
}

Lewalker59

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯js实现上传按钮并显示缩略图小轮子

前言造这个小轮子的起因是因为默认提供的上传文件的按钮属实丑陋了点，而且还不能直接修改这个按钮的样式，所以就打算直接搞个小轮子方便日后需要时使用。使用原生js实现。那么直接上效果图。预览效果图如下代码实现html代码<html> <head> <meta charset="utf-8" /> <title>uploalFileBu...
复制链接

扫一扫

专栏目录