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 Event学习第六章 事件的访问
Feb 07 Javascript
Extjs4中Form的使用之本地hiddenfield
Nov 26 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
JS实现同时搜索百度和必应的方法
Jan 27 Javascript
javascript入门教程基础篇
Nov 16 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
jquery获取select,option所有的value和text的实例
Mar 06 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
深入浅析vue中cross-env的使用
Sep 12 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
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
php全角字符转换为半角函数
2014/02/07 PHP
PHP设置进度条的方法
2015/07/08 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
jquery ajax abort()的使用方法
2010/10/28 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
微信小程序引用公共js里的方法的实例详解
2017/08/17 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
Vue通过WebSocket建立长连接的实现代码
2019/11/05 Javascript
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
Python找出最小的K个数实例代码
2018/01/04 Python
详解python中asyncio模块
2018/03/03 Python
python实现zabbix发送短信脚本
2018/09/17 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
python中append实例用法总结
2019/07/30 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
大学校庆策划书
2014/01/31 职场文书
经典的毕业生自荐信范文
2014/04/14 职场文书
食品安全承诺书
2014/05/22 职场文书
设计专业毕业生求职信
2014/06/25 职场文书
支教个人总结
2015/03/04 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
秋收起义观后感
2015/06/11 职场文书
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server