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 双色表格实现代码
Dec 08 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
Vue结合原生js实现自定义组件自动生成示例
Jan 21 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 Javascript
js实现网页版贪吃蛇游戏
Feb 22 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 XML备份Mysql数据库
2009/05/27 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
javascript实现的listview效果
2007/04/28 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
2016/10/18 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
深入研究React中setState源码
2017/11/17 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
Python实现对象转换为xml的方法示例
2017/06/08 Python
Python信息抽取之乱码解决办法
2017/06/29 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
韩国现代百货官网:Hmall
2018/03/21 全球购物
志愿者服务活动总结报告
2015/05/06 职场文书
自荐信范文
2019/05/20 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python