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 相关文章推荐
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
JavaScript 动态加载脚本和样式的方法
Apr 13 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
动态的9*9乘法表效果的实现代码
May 16 Javascript
bootstrap日历插件datetimepicker使用方法
Dec 14 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
May 10 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
详解tween.js 中文使用指南
Jan 05 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
ES6 解构赋值的原理及运用
May 25 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生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
php微信开发之谷歌测距
2018/06/14 PHP
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
npm的lock机制解析
2019/06/20 Javascript
python简单操作excle的方法
2018/09/12 Python
selenium+python自动化测试之使用webdriver操作浏览器的方法
2019/01/23 Python
通过python实现随机交换礼物程序详解
2019/07/10 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
我们是伦敦女孩:WalG
2018/01/08 全球购物
JackJones官方旗舰店:杰克琼斯男装
2018/03/27 全球购物
教育系毕业生中文求职信范文
2013/10/06 职场文书
毕业生就业自荐信
2013/12/04 职场文书
网络书店创业计划书
2014/02/07 职场文书
三年级学生评语
2014/04/23 职场文书
环保标语口号
2014/06/13 职场文书
股指期货心得体会
2014/09/10 职场文书
见习报告格式范文
2014/11/08 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
《我的长生果》教学反思
2016/02/20 职场文书
小数乘法教学反思
2016/02/22 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
八年级作文之一起的走过日子
2019/09/17 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js