精简后的上传图片预览功能,兼容各种格式,仅供参考!
来源:互联网 发布:公司网络解决方案 编辑:程序博客网 时间:2024/05/07 02:57
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Firefox3,IE6,IE7,IE8上传图片预览</title>
<style type="text/css" mce_bogus="1">
#preview_wrapper{
display:inline-block;
width:80px;
height:80px;
background-color:#CCC;
}
#preview_fake{ /* 该对象用户在IE下显示预览图片 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
#preview{ /* 该对象用户在FF下显示预览图片 */
width:80px;
height:80px;
} </style>
<script><!--
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' );
if( sender.files && sender.files[0] ){
objPreview.style.display = 'block';
objPreview.style.width = '80px';
objPreview.style.height = '80px';
// 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();
var imgSrc = document.selection.createRange().text;
objPreviewFake.filters.item(
'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
}
}
// --></script>
</head>
<body>
<div id="preview_wrapper">
<div id="preview_fake">
<img id="preview" />
</div>
</div>
<br/>
<input id="upload_img" type="file" onchange="onUploadImgChange(this)"/>
</body>
</html>
- 精简后的上传图片预览功能,兼容各种格式,仅供参考!
- jquery实现兼容浏览器的图片上传本地预览功能
- jquery实现兼容浏览器的图片上传本地预览功能
- js图片上传预览功能兼容实现
- 兼容IE、FF的图片上传预览
- 兼容火狐 IE的图片上传预览
- 兼容各个浏览器的图片上传预览
- 兼容浏览器图片上传本地预览功能js脚本
- 带图片预览功能的图片上传
- 最近项目中用到的图片上传前预览功能,兼容IE6-9,FF
- 兼容IE、谷歌Chrome、火狐Firefox的图片上传预览功能
- 兼容IE、谷歌Chrome、火狐Firefox的图片上传预览功能
- 图片上传后预览
- 图片上传预览功能
- 图片上传预览功能
- 图片上传预览功能
- 上传图片预览功能
- IE兼容上传图片预览
- 追MM与设计模式
- 代码片段
- 旅游网站运营探讨
- 如何理解C run-time library (C运行时库)
- Dreamweaver cs3 序列号
- 精简后的上传图片预览功能,兼容各种格式,仅供参考!
- 小型旅游网站组织运营案例
- AscII,Unicode,utf-8 utf-16,utf-32,BOM 的解说(一)
- WinCE 5.0边做边学(一)
- CURSOR
- 什么是计算机
- ExtJSt-2.0.2开发包目录简介
- 在Linux下编译使用kfs-0.3
- WinCE 5.0边做边学(二)