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

程序员文章站 2023-12-04 11:07:34

这篇文章主要介绍了Html5 FileReader实现即时上传图片功能，因为项目只要求在ie9以上，所以就没有写出ie8的啦，需要的朋友可以参考下... 14-09-01...

下面的是在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>

上一篇： Android HttpClient GET或者POST请求基本使用方法

下一篇： jsp 复选框使用方法

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