Firefox 和IE上传图片实现预览
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New file input tester.</title>
<style type="text/css">
.preview_fake{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
</style>
</head>
<body>
<input type="file" ID="file_UpLoad" Width="300px" CssClass="bd" onchange="onUploadImgChange(this);" />
<div id="preview_fake" class="preview_fake">
<img id="imgBanner" runat="server" src="http://images.cnblogs.com/dp/dpindex_17.jpg" style="width:650px;height:103px"/>
</div>
<script type="text/javascript">
function onUploadImgChange(upfile) {
if (navigator.userAgent.indexOf("MSIE") > 0) {
try {
if (!upfile.value.match(/.jpg|.gif|.png|.bmp/i)) {
alert('请上传.jpg|.gif|.png|.bmp类型的图片');
return false;
}
var objPreview = document.getElementById("imgBanner");
var objPreviewFake = document.getElementById('preview_fake');
if (objPreviewFake.filters) {
// IE7,IE8 ñͼƬַΪ img.src ʱĪĺ
// IE7, IE8ȫֱͨ input[file].value ȡļ·
upfile.select();
var imgSrc = document.selection.createRange().text;
objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
objPreviewFake.style.width = 300 + 'px';
objPreviewFake.style.height = 300 + 'px';
objPreview.style.display = "none";
upfile.blur();
}
} catch (ex) {
}
}
else if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) { //FireFox浏览器
if (!upfile.value.match(/.jpg|.gif|.png|.bmp/i)) {
alert('请上传.jpg|.gif|.png|.bmp类型的图片');
return false;
}
var o = document.getElementById("file_UpLoad");
var p = document.getElementById("imgBanner");
p.src = o.files[0].getAsDataURL();
p.style.display = "block";
}
}
</script>
</body>
</html>
posted on 2009-11-10 15:00 dream one minute 阅读(616) 评论(1) 编辑 收藏 举报
