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


Posted in Javascript onMay 04, 2020

前言

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
javascript显示隐藏层比较不错的方法分析
Sep 30 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
原生JS实现留言板功能
Feb 08 Javascript
JavaScript this关键字的深入详解
Jan 14 Javascript
js代码实现轮播图
May 04 #Javascript
原生js实现轮播图特效
May 04 #Javascript
jquery实现手风琴案例
May 04 #jQuery
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
May 03 #Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
May 03 #Javascript
vue自定义标签和单页面多路由的实现代码
May 03 #Javascript
JavaScript函数重载操作实例浅析
May 02 #Javascript
You might like
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
PHP实现清除wordpress里恶意代码
2015/10/21 PHP
详解PHP执行定时任务的实现思路
2015/12/21 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
python实现在pickling的时候压缩的方法
2014/09/25 Python
在Django中创建第一个静态视图
2015/07/15 Python
解决Python传递中文参数的问题
2015/08/04 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
Python爬虫库BeautifulSoup的介绍与简单使用实例
2020/01/25 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
termux中matplotlib无法显示中文问题的解决方法
2021/01/11 Python
自学考试自我鉴定范文
2013/09/26 职场文书
高三毕业生自我鉴定
2013/12/20 职场文书
写给老师的表扬信
2014/01/21 职场文书
摄影助理岗位职责
2014/02/07 职场文书
国贸专业自荐信范文
2014/03/02 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
2015年共青团工作总结
2015/05/15 职场文书
地道战观后感400字
2015/06/04 职场文书
学习经验交流会总结
2015/11/02 职场文书
2016年父亲节寄语
2015/12/04 职场文书
MySQL触发器的使用
2021/05/24 MySQL
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS