多种方式实现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 相关文章推荐
动态调用CSS文件的JS代码
Jul 29 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
一个实用的图片切换支持点击切换和自动轮播
Sep 09 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 Javascript
详解AngularJS controller调用factory
May 19 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
Vue不能观察到数组length的变化
Jun 08 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
vue中defineProperty和Proxy的区别详解
Nov 30 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
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
php实现jQuery扩展函数
2009/10/30 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
PHP单例模式详细介绍
2015/07/01 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
jquery 事件对象属性小结
2010/04/27 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
pytorch构建多模型实例
2020/01/15 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
财政专业求职信范文
2014/02/19 职场文书
党支部反对四风思想汇报
2014/10/10 职场文书
中秋节随笔
2015/08/15 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书
MongoDB使用场景总结
2022/02/24 MongoDB