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 相关文章推荐
基于jquery实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
jquery $.each() 使用小探
Aug 23 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 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
用PHP函数解决SQL injection
2006/12/09 PHP
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
2014/10/14 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
js选项卡的制作方法
2017/01/23 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
JavaScript 数组的进化与性能分析
2017/09/18 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
深入理解Python3中的http.client模块
2017/03/29 Python
恢复百度云盘本地误删的文件脚本(简单方法)
2017/10/21 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
Python实现的特征提取操作示例
2018/12/03 Python
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
公司财务工作总结的自我评价
2013/11/23 职场文书
国际贸易个人求职信范文
2014/01/04 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
2014年导购员工作总结
2014/11/18 职场文书
2014年医生工作总结
2014/11/21 职场文书
交通安全主题班会
2015/08/12 职场文书
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android