Html5 FileReader实现即时上传图片功能实例代码


Posted in HTML / CSS onSeptember 01, 2014

下面的是在ie9下面实现的预览,跟ie8还是不一样的,不过我记得貌似ie8好像也是利用了fiter的功能,因为项目只要求在ie9以上,所以就没有写出ie8的啦

复制代码
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p><style type="text/css">
#kk{
width:400px;
height:400px;
overflow: hidden;
}
#preview_wrapper{
width:300px;
height:300px;
background-color:#CCC;
overflow: hidden;
}
#preview_fake{ /* 该对象用于在IE下显示预览图片 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
width:300px;
overflow: hidden;
}
#preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸,无其它用途 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
width:300px;
visibility:hidden;
overflow: hidden;
}
#preview{ /* 该对象用于在FF下显示预览图片 */
width:300px;
height:300px;
overflow: hidden;
}
</style><script type="text/javascript">
function onUploadImgChange(sender){
if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){
alert('图片格式无效!');
return false;
}
var objPreview = document.getElementById('preview');
var objPreviewFake = document.getElementById('preview_fake');
var objPreviewSizeFake = document.getElementById('preview_size_fake');
if( sender.files && sender.files[0] ){ //这里面就是chrome和ff可以兼容的了
objPreview.style.display = 'block';
objPreview.style.width = 'auto';
objPreview.style.height = 'auto';
// Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
objPreview.src = sender.files[0].getAsDataURL();
}else if( objPreviewFake.filters ){
// IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果
//(相同环境有时能显示,有时不显示),因此只能用滤镜来解决
// IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
sender.select();
sender.blur();
var imgSrc = document.selection.createRange().text;
objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
objPreviewSizeFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
alert("已成功选择图片!");
alert(objPreviewSizeFake.offsetWidth);
autoSizePreview( objPreviewFake,objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight );
objPreview.style.display = 'none';
}
}
function onPreviewLoad(sender){
autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight );
}
function autoSizePreview( objPre, originalWidth, originalHeight ){
var zoomParam = clacImgZoomParam( 300, 300, originalWidth, originalHeight );
objPre.style.width = zoomParam.width + 'px';
objPre.style.height = zoomParam.height + 'px';
objPre.style.marginTop = zoomParam.top + 'px';
objPre.style.marginLeft = zoomParam.left + 'px';
}
function clacImgZoomParam( maxWidth, maxHeight, width, height ){
var param = { width:width, height:height, top:0, left:0 };
if( width>maxWidth || height>maxHeight ){
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;
if( rateWidth > rateHeight ){
param.width = maxWidth;
param.height = height / rateWidth;
}else{
param.width = width / rateHeight;
param.height = maxHeight;
}
}
param.left = (maxWidth - param.width) / 2;
param.top = (maxHeight - param.height) / 2;
return param;
}
</script> <input name="localfile" type="file" id="localfile" size="28" onchange="onUploadImgChange(this)"/> <!--以下是预览图片用的-->
<div id="kk">
<div id="preview_wrapper">
<div id="preview_fake">
<img id="preview" src="" onload="onPreviewLoad(this)"/>
</div>
</div>
<br/>
<img id="preview_size_fake" />
</div></p>
</body>
</html>
HTML / CSS 相关文章推荐
手把手教你用纯css3实现轮播图效果实例
May 04 HTML / CSS
CSS3旋转——彩色扇子兼容firefox浏览器
Jun 04 HTML / CSS
css3隔行变换色实现示例
Feb 19 HTML / CSS
谈谈对css属性box-sizing的了解
Jan 04 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 HTML / CSS
html5定位获取当前位置并在百度地图上显示
Aug 22 #HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 #HTML / CSS
html5 更新图片颜色示例代码
Jul 29 #HTML / CSS
Html5 语法与规则简要概述
Jul 29 #HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 #HTML / CSS
HTML5实现WebSocket协议原理浅析
Jul 07 #HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 #HTML / CSS
You might like
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
json跟xml的对比分析
2008/06/10 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python 默认参数问题的陷阱
2016/02/29 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
python实现xlsx文件分析详解
2018/01/02 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
Python调用飞书发送消息的示例
2020/11/10 Python
python 使用openpyxl读取excel数据
2021/02/18 Python
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
建筑施工实习自我鉴定
2013/09/19 职场文书
数控技术专业推荐信
2013/11/01 职场文书
关于幼儿的自我评价
2013/12/18 职场文书
解除劳动关系协议书2篇
2014/11/28 职场文书
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL