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 常用关键字列表集合
Dec 04 Javascript
jQuery版Tab标签切换
Mar 16 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 Javascript
原生JS运动实现轮播图
Jan 02 Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
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 array_merge下进行数组合并的代码
2008/07/22 PHP
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
详解vue2 $watch要注意的问题
2017/09/08 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
2020/03/02 Javascript
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
Python随机读取文件实现实例
2017/05/25 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
幼儿师范毕业生自荐信
2013/11/09 职场文书
秋季运动会稿件
2014/01/30 职场文书
松材线虫病防治方案
2014/06/15 职场文书
新文化运动的基本口号
2014/06/21 职场文书
2014年电教工作总结
2014/12/19 职场文书
学期个人自我总结
2015/02/13 职场文书
音乐会主持人开场白
2015/05/28 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
Python函数中apply、map、applymap的区别
2021/11/27 Python