多种方式实现js图片预览


Posted in Javascript onDecember 12, 2016

先贴代码,之后完善:

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="Generator" content="EditPlus®">
 <meta name="Author" content="">
 <meta name="Keywords" content="">
 <meta name="Description" content="">
 <title>js多种方式图片预览-持续更新</title>
 </head>
 <body>
 <body> 
 <input type="file" id="file" value="选择" accept="image/*">
 <div style="width:300px;height:300px;border:1px solid #ccc">
 <img id="img_show" src="" />
 </div>

 </body>
 <script type="text/javascript" src="./jquery-3.1.1.min.js"></script>
 <script type="text/javascript">
 //设置自己的变量存储区
 var Util = {
   file : $("#file"),
   image_show:$("#img_show")
 }


 Util.file.onchange=function(f){
  if(this.files[0].type.indexOf('image')<0){
   alert("请选择图片文件!");
   return; 
  }

  if(this.files[0].size/1024 > 5*1024){
   alert("图片过大,请选择5M以下的文件");
   return;
  }

  if(typeof FileReader=='undefined'){//如果支持,typeOf返回的也是 Function
   alert("您的浏览器不支持html5 fileReader请更换浏览器重试!");
   return;
  }


  var reader = new FileReader();
  reader.readAsDataURL(this.files[0]);//这里传的是一个blob ,其实file对象就是继承自bolob
  reader.onload=function(e){
   console.log(reader.result);//这里拿到的是一个base64编码后的图片
   Util.image_show.src=reader.result;
  }

 };

 </script>
</html>

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

Javascript 相关文章推荐
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
js动态设置div的值下例子
Oct 29 Javascript
javascript实现密码验证
Nov 10 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
Sep 13 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
JavaScript实现多栏目切换效果
Dec 12 #Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 #Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 #Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
Dec 12 #Javascript
AngularJS封装指令方法详解
Dec 12 #Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
Dec 12 #Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 #Javascript
You might like
PHP 5.0对象模型深度探索之绑定
2006/09/05 PHP
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
2016/05/05 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
vue插槽slot的理解和使用方法
2019/04/03 Javascript
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
python使用Tkinter实现在线音乐播放器
2018/01/30 Python
Python实现快速计算词频功能示例
2018/06/25 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
英国网上花店:Bunches
2016/11/29 全球购物
新闻编辑自荐书范文
2014/02/12 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
爱国演讲稿400字
2014/05/07 职场文书
普通话宣传标语
2014/06/26 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
纪念一二九运动演讲稿
2014/09/16 职场文书
公积金接收函格式
2015/01/30 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
2015年度女工工作总结
2015/10/22 职场文书
如何在python中实现ECDSA你知道吗
2021/11/23 Python
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS