JavaSctit 利用FileReader和滤镜上传图片预览功能


Posted in Javascript onSeptember 05, 2017

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File或 Blob对象指定要读取的文件或数据。

1、FileReader接口的方法

FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取。无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中。

JavaSctit 利用FileReader和滤镜上传图片预览功能

2、FileReader接口事件

FileReader接口包含了一套完整的事件模型,用于捕获读取文件时的状态。

JavaSctit 利用FileReader和滤镜上传图片预览功能

重点介绍下:readAsDataURL

开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容这个方法很有用,

比如,可以实现图片的本地预览

IE10以下的版本不支持FileReader()构造函数.不过可以利用滤镜来兼容旧版本的IE:兼容IE的图片本地预览.

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript">
var loadImageFile = (function () {
  if (window.FileReader) {
    var  oPreviewImg = null, oFReader = new window.FileReader(),
      rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
    oFReader.onload = function (oFREvent) {
      if (!oPreviewImg) {
        var newPreview = document.getElementById("imagePreview");
        oPreviewImg = new Image();
        oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px";
        oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px";
        newPreview.appendChild(oPreviewImg);
      }
      oPreviewImg.src = oFREvent.target.result;
    };
    return function () {
      var aFiles = document.getElementById("imageInput").files;
      if (aFiles.length === 0) { return; }
      if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; }
      oFReader.readAsDataURL(aFiles[0]);
    }
  }
  if (navigator.appName === "Microsoft Internet Explorer") {
    return function () {
      document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value;
    }
  }
})();
</script>
<style type="text/css">
#imagePreview {
  width: 160px;
  height: 120px;
  float: right;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
</style>
</head>
<body>
<div id="imagePreview"></div>
<form name="uploadForm">
<p><input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();" /><br />
<input type="submit" value="Send" /></p>
</form>
</body>
</html>

看看在IE7下的效果

JavaSctit 利用FileReader和滤镜上传图片预览功能

谷歌的效果

JavaSctit 利用FileReader和滤镜上传图片预览功能

很好,都很完美。具体参考链接:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

总结

以上所述是小编给大家介绍的JavaSctit 利用FileReader和滤镜上传图片预览功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
使用jQuery实现返回顶部
Jan 26 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
React Native中的RefreshContorl下拉刷新使用
Oct 09 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
Node.js API详解之 vm模块用法实例分析
May 27 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 #jQuery
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 #Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 #Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 #Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 #Javascript
Angular实现下载安装包的功能代码分享
Sep 05 #Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 #Javascript
You might like
用来给图片加水印的PHP类
2008/04/09 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
js实现无缝滚动特效
2015/12/20 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
python实现在pickling的时候压缩的方法
2014/09/25 Python
Python 的描述符 descriptor详解
2016/02/27 Python
Python 12306抢火车票脚本
2018/02/07 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
python3 kubernetes api的使用示例
2021/01/12 Python
Java基础面试题
2012/11/02 面试题
大学生创业感言
2014/01/25 职场文书
八年级数学教学反思
2014/01/31 职场文书
员工保密承诺书
2014/05/28 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
工会工作个人总结
2015/03/03 职场文书
人事任命通知
2015/04/20 职场文书
Python办公自动化解决world文件批量转换
2021/09/15 Python