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 相关文章推荐
JavaScript中的Document文档对象
Jan 16 Javascript
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
js阻止默认右键的下拉菜单方法
Jan 02 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 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
使用Apache的rewrite技术
2006/06/22 PHP
Extjs学习笔记之六 面版
2010/01/08 Javascript
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
JS正则表达式修饰符global(/g)用法分析
2016/12/27 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
Python3中多线程编程的队列运作示例
2015/04/16 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
详解Python 循环嵌套
2020/07/09 Python
如何用python 操作zookeeper
2020/12/28 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
追悼会主持词
2014/03/20 职场文书
经济贸易系求职信
2014/08/04 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
班主任先进事迹材料
2014/12/17 职场文书
首都博物馆观后感
2015/06/05 职场文书
导游词之山东八大关
2019/12/18 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript