您的位置：首页 > Web前端 > HTML5

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

2014-09-01 11:02 1371 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航