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 相关文章推荐
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
jquery validation插件表单验证的一个例子
Mar 03 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
Jun 11 Javascript
基于Vue实现后台系统权限控制的示例代码
Aug 29 Javascript
谈谈JS中的!!
Dec 07 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
解决vuex数据页面刷新后初始化操作
Jul 26 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数组函数序列之ksort()对数组的元素键名进行升序排序,保持索引关系
2011/11/02 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
如何让python的运行速度得到提升
2020/07/08 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
世博会口号
2014/06/20 职场文书
咖啡店创业计划书
2014/08/15 职场文书
村主任“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书