H5上传本地图片并预览功能


Posted in Javascript onMay 08, 2017

最近工作中需要H5上传显示图片的功能,如图:

H5上传本地图片并预览功能

直接上代码:

html部分

<div class="works-wrap"> 
 <div class="figure-box" id="figure_box"></div> 
 <div class="add-btn"> 
 <input type="file" id="imgUploadBtn" /> 
 <a href="javascript:void(0);" rel="external nofollow" ><i></i>添加作品</a></div> 
 </div> 
</div>

我这边用css将input[type=file] 设置成了opticy:0; 这样可以看起来更像原生的上传。

var addWork = { 
 add: function(btn, figure_box) { 
 var figureBox = document.getElementById(figure_box); //获取显示图片的div元素 
 var input = document.getElementById(btn); //获取选择图片的input元素 
 //这边是判断本浏览器是否支持这个API。 
 if (typeof FileReader === 'undefined') { 
 alert("浏览器版本过低,请先更新您的浏览器~"); 
 input.setAttribute('disabled', 'disabled'); 
 } else { 
 input.addEventListener('change', readFile, false); 

 //如果支持就监听改变事件,一旦改变了就运行readFile函数。 
 } 
 
 function readFile() { 
 var file = this.files[0]; //获取file对象 
 //判断file的类型是不是图片类型。 
 if (!/image\/\w+/.test(file.type)) { 
 alert("请上传一张图片~"); 
 return false; 
 } 
 
 var reader = new FileReader(); //声明一个FileReader实例 
 reader.readAsDataURL(file); //调用readAsDataURL方法来读取选中的图像文件 
 //最后在onload事件中,获取到成功读取的文件内容,并以插入一个img节点的方式显示选中的图片 
 reader.onload = function(e) { 
 // 创建一个新增的图片和文字input 
 var figure = $('<div class="figure"><div class="figure-hd">我的头部</div><div class="figure-bd"><img src="' + this.result + '" /><textarea placeholder="请输入文字"></textarea></div></div>'); 
 figure.appendTo(figureBox); 
 } 
 } 
 } 
}

更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

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

Javascript 相关文章推荐
jQuery toggle()设置CSS样式
Nov 05 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
javascript的内存管理详解
Aug 07 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 #jQuery
vue2.0实现导航菜单切换效果
May 08 #Javascript
jquery replace方法去空格
May 08 #jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 #jQuery
html5+canvas实现支持触屏的签名插件教程
May 08 #Javascript
JQuery实现图片轮播效果
May 08 #jQuery
jQuery中的deferred对象和extend方法详解
May 08 #jQuery
You might like
PHP 日期加减的类,很不错
2009/10/10 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
PHP 断点续传实例详解
2017/11/11 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
2014/01/13 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
C#微信小程序服务端获取用户解密信息实例代码
2017/03/10 Javascript
详解vue 项目白屏解决方案
2018/10/31 Javascript
浅析Python中signal包的使用
2015/11/13 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
python使用pymongo操作mongo的完整步骤
2019/04/13 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
python实现经纬度采样的示例代码
2020/12/10 Python
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
大学生专科学习生活的自我评价
2013/12/07 职场文书
党员志愿者活动方案
2014/08/28 职场文书
农行心得体会
2014/09/02 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
Golang Web 框架Iris安装部署
2022/08/14 Python