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 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
Nov 25 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
详解Vue 如何监听Array的变化
Jun 06 Javascript
TypeScript类型声明书写详解
Aug 28 Javascript
vue的滚动条插件实现代码
Sep 07 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 Javascript
教你部署vue项目到docker
Apr 05 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 程式大小
2006/12/06 PHP
PHP数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
php 生成自动创建文件夹并上传文件的示例代码
2014/03/07 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
javascript 操作文件 实现方法小结
2009/07/02 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
2010/01/01 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
在javascript中使用com组件的简单实现方法
2016/08/17 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
python中input()与raw_input()的区别分析
2016/02/27 Python
Python 装饰器使用详解
2017/07/29 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
机器学习之KNN算法原理及Python实现方法详解
2018/07/09 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
tensorboard显示空白的解决
2020/02/15 Python
分享一个python的aes加密代码
2020/12/22 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
WEB控件及HTML服务端控件能否调用客户端方法?如果能,请解释如何调用?
2015/08/25 面试题
汽车质检员岗位职责
2015/04/08 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js