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 15 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
Angularjs中使用轮播图指令swiper
May 30 Javascript
vue中axios实现数据交互与跨域问题
May 12 Javascript
如何管理Vue中的缓存页面
Feb 06 Vue.js
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边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
php strcmp使用说明
2010/04/22 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
php生成gif动画的方法
2015/11/05 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
2006/11/30 Javascript
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
Js 随机数产生6位数字
2010/05/13 Javascript
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
js实现搜索栏效果
2018/11/16 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
一个简单的python程序实例(通讯录)
2013/11/29 Python
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
Python Matplotlib库入门指南
2015/05/18 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python实现感知器模型、两层神经网络
2017/12/19 Python
python爬虫基本知识
2018/03/05 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
对Python中内置异常层次结构详解
2018/10/18 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
春季运动会广播稿大全
2014/02/19 职场文书
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
校庆标语集锦
2014/06/25 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
团干部培训班心得体会
2016/01/06 职场文书