js实现图片上传并预览功能


Posted in Javascript onAugust 06, 2018

本文为大家分享了js实现图片上传并预览的具体代码,供大家参考,具体内容如下

思路:完成这个功能,首先需要美化上传图片的按钮,然后添加一个<img/>标签,在图片上传之后,用新图片的src替换原来<img/>标签中的src。

如下图所示,是原始的按钮样式:

js实现图片上传并预览功能

美化步骤:

(1)将上传图片标签采用绝对定位,使之位于一个图片,按钮,div等标签上。或者给图片,按钮或div设置绝对定位,总之,是要让上传文件按钮和用户指定的按钮重合。

(2)给上传图片标签设置大大小,使之和与它重叠的图片,按钮,div等标签大小一致。

(3)我将此标签设置为透明:opacity:0;

如下图所示,是两种美化后的上传图片按钮:

js实现图片上传并预览功能js实现图片上传并预览功能

接下来是完成图片预览的功能,步骤:

(1)首先需要定义好一个<img>,src为空或者是默认图片,

(2)如果src为空,就给定义好的img设置为透明:opacity:0;如果不是透明的话,会显示一个图片的标志,不美观。

(3)点击上传图片后,获取上传的图片的src,将它赋值给事先定义好的<img>,再给<img>设置opacity:1;

接下来为具体的代码示例。

 示例一:将图片上传到点击的位置。(此示例中使用了AUI框架,但不影响此功能。)

HTML代码:

<div id="imgPreview">
 <div id="prompt3">
 <span id="imgSpan">
 点击上传
 <br />
 <i class="aui-iconfont aui-icon-plus"></i>
 <!--AUI框架中的图标-->
 </span>
 <input type="file" id="file" class="filepath" onchange="changepic(this)" accept="image/jpg,image/jpeg,image/png,image/PNG">
 <!--当vaule值改变时执行changepic函数,规定上传的文件只能是图片-->
 </div>
 <img src="#" id="img3" />
</div>

 CSS代码:

#imgPreview {
 width: 40%;
 height: 180px;
 margin: 10px auto 0px auto;
 border: 1px solid black;
 text-align: center;
}
#prompt3 {
 width: 100%;
 height: 180px;
 text-align: center;
 position: relative;
}
#imgSpan {
 position: absolute;
 top: 60px;
 left: 40px;
}
.filepath {
 width: 100%;
 height: 100%;
 opacity: 0;
}
#img3 {
 height: 100%;
 width: 100%;
 display: none;
}

JS代码:

function changepic() {
 $("#prompt3").css("display", "none");
 var reads = new FileReader();
 f = document.getElementById('file').files[0];
 reads.readAsDataURL(f);
 reads.onload = function(e) {
 document.getElementById('img3').src = this.result;
 $("#img3").css("display", "block");
 };
}

效果如下图所示:

js实现图片上传并预览功能js实现图片上传并预览功能

示例二:将图片上传到点击按钮旁边的位置。(此示例中使用了阿里巴巴矢量图标库,但不影响此功能。)

HTML代码:

<div class="aui-col-xs-3" id="img">
 <svg class="icon bigIcon" aria-hidden="true">
 <use xlink:href="#icon-msnui-add"></use>
 </svg>
 <!--阿里巴巴矢量图标,就是最后效果图中的“+”图标-->
 <div class="aui-grid-label">添加图片</div>
 <div id="upImg">
 <input type="file" name="file" id="chooseImage" />
 </div>
 <div id="imgPreview">
 <img src="#" id="cropedBigImg" />
 </div>
</div>

 CSS代码:

#img {
 float: left;
 margin-left: 20px;
 width: 150px;
 height: 60px;
 }
#upImg {
 position: absolute;
 top: 0px;
 left: 0px;
}
#upImg input {
 width: 70px;
 height: 60px;
 opacity: 0;
}
#imgPreview {
 width: 80px;
 height: 60px;
 position: absolute;
 left: 70px;
 top: 0px;
}
#cropedBigImg{
 width: 100%;
 height: 100%;
 display: none;
}

JS代码:

$('#chooseImage').on('change', function() {//当chooseImage的值改变时,执行此函数
 var filePath = $(this).val(), //获取到input的value,里面是文件的路径
 fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
 src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式
 
 // 检查是否是图片
 if(!fileFormat.match(/.png|.jpg|.jpeg/)) {
 error_prompt_alert('上传错误,文件格式必须为:png/jpg/jpeg');
 return;
 }else{
 $('#cropedBigImg').css('display','block');
 $('#cropedBigImg').attr('src', src); 
 } 
});

效果如下图所示:

js实现图片上传并预览功能js实现图片上传并预览功能

 本人为JS实习生一枚,不断学习,不断进步,欢迎各位前辈批评指教。

如果大家想对JS有更加深入系统的学习,可以参阅 JavaScript忍者秘籍 这本经典书籍。

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

Javascript 相关文章推荐
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 Javascript
JS 实现导航栏悬停效果(续)
Sep 24 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Jan 24 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
JavaScript编写一个贪吃蛇游戏
Mar 09 Javascript
JavaScript评论点赞功能的实现方法
Mar 13 Javascript
javascript数组定义的几种方法
Oct 06 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 Javascript
vscode调试node.js的实现方法
Mar 22 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 #Javascript
微信小程序网络封装(简单高效)
Aug 06 #Javascript
json字符串传到前台input的方法
Aug 06 #Javascript
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 #Javascript
react-native使用leanclound消息推送的方法
Aug 06 #Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 #Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 #Javascript
You might like
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
目录,文件操作详谈―PHP
2006/11/25 PHP
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
JS操作XML中DTD介绍及使用方法分析
2019/07/04 PHP
SWFObject Flash js调用类
2008/07/08 Javascript
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
[41:20]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS DK
2014/05/26 DOTA
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
python爬取网易云音乐评论
2018/11/16 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
Jdbc数据访问技术面试题
2012/03/30 面试题
应届生船舶驾驶求职信
2013/10/19 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
民事申诉状范本
2015/05/20 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python