您的位置：首页 > 其它

Firefox 和IE上传图片实现预览

2009-11-10 15:00 746 查看

<!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>

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

标签：

相关文章推荐

新的分享

章节导航