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 相关文章推荐
js 表格隔行颜色
Dec 02 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
JavaScript类的继承多种实现方法
May 30 Javascript
详解Vite的新体验
Feb 22 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数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
PHP 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
PHP设计模式之装饰者模式代码实例
2015/05/11 PHP
php 指定范围内多个随机数代码实例
2016/07/18 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
javascript跨域刷新实现代码
2011/01/01 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
详解js中==与===的区别
2017/01/08 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
jQuery实现鼠标响应式透明度渐变动画效果示例
2018/02/13 jQuery
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
学习python (1)
2006/10/31 Python
Python 变量类型及命名规则介绍
2013/06/08 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
Python 如何调试程序崩溃错误
2020/08/03 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
买房子个人收入证明
2014/10/12 职场文书
升学宴答谢词
2015/01/05 职场文书
村党组织公开承诺书
2015/04/30 职场文书
门卫管理制度范本
2015/08/05 职场文书
初中团委工作总结
2015/08/13 职场文书
mysql的数据压缩性能对比详情
2021/11/07 MySQL