编程 Javascript

多种方式实现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>

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

多种方式实现js图片预览

- Author -

独行侠梦

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Opacity.js

Jan 22 Javascript

JS 自定义带默认值的函数

Jul 21 Javascript

JS 退出系统并跳转到登录界面的实现代码

Jun 29 Javascript

jQuery动态显示和隐藏datagrid中的某一列的方法

Dec 11 Javascript

javascript在当前窗口关闭前检测窗口是否关闭

Sep 29 Javascript

限制上传文件大小和格式的jQuery插件实例

Jan 24 Javascript

jQuery遍历页面所有CheckBox查看是否被选中的方法

Apr 14 Javascript

JavaScript中exec函数用法实例分析

Jun 08 Javascript

浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)

Feb 14 Javascript

AngularJS实现的获取焦点及失去焦点时的表单验证功能示例

Oct 25 Javascript

轻松搞定jQuery+JSONP跨域请求的解决方案

Mar 06 jQuery

koa源码中promise的解读

Nov 13 Javascript

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