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 1.4.2发布!主要是性能与API
Feb 25 Javascript
Javascript 判断Flash是否加载完成的代码
Apr 12 Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
JSON语法五大要素图文介绍
Dec 04 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 Javascript
JS数组去重详情
Nov 07 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
我的论坛源代码(六)
2006/10/09 PHP
遭遇php的in_array低性能问题
2013/09/17 PHP
PHP速成大法
2015/01/30 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
2015/04/22 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
Python内置的字符串处理函数详细整理(覆盖日常所用)
2014/08/19 Python
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
python+tkinter实现学生管理系统
2019/08/20 Python
pytorch数据预处理错误的解决
2020/02/20 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
Python 多进程、多线程效率对比
2020/11/19 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
德国前卫设计师时装在线商店:Luxury Loft
2019/11/04 全球购物
幼儿园中班区域活动总结
2014/07/09 职场文书
治安消防安全责任书
2014/07/23 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
2016年第104个国际护士节活动总结
2016/04/06 职场文书