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 相关文章推荐
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
IE与firefox之jquery用法区别
Oct 03 Javascript
javascript 数据类型转换(parseInt,parseFloat)
Jul 20 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
jquery 滚动条事件简单实例
Jul 12 Javascript
javascript使用正则表达式实现去掉空格之后的字符
Feb 15 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 Javascript
Vue可自定义tab组件用法实例
Oct 24 Javascript
js实现AI五子棋人机大战
May 28 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
ThinkPHP数据操作方法总结
2015/09/28 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
JavaScript实现基于十进制的四舍五入实例
2015/07/17 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
Position属性之relative用法
2015/12/14 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
Python计算一个文件里字数的方法
2015/06/15 Python
Python变量作用范围实例分析
2015/07/07 Python
Python将多个excel文件合并为一个文件
2018/01/03 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
python:动态路由的Flask程序代码
2019/11/22 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
俄罗斯优惠券网站:BIGLION
2017/05/21 全球购物
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
编写strcpy函数
2014/06/24 面试题
村优秀党员事迹材料
2014/01/15 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
python字符串的多行输出的实例详解
2021/06/08 Python