【此脚本参考网络资源，谢谢无名分享作者】
1、脚本，把下面代码加到<head>与</head>之间
<script type="text/javascript" language="javascript">
function PreviewImg(imgFile){
document.getElementById("idImg").style.display = "none";//隐藏初始化图片的显示,让过滤器显示
var newPreview=document.getElementById("newPreview");
remove(newPreview);
var imgDiv=document.createElement("div");
document.body.appendChild(imgDiv);
imgDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src=imgFile.target.value;
var img_object = document.getElementById("engineroom_layout_addr");
img_object.style.display = "inline";
img_object.src = addrObject.value;
if (!img_object.width || img_object.width > 300) {
imgDiv.style.width = "300px";
}
if (!img_object.height || img_object.height > 200) {
imgDiv.style.height = "200px";
}
addrObject.style.display = "none";
//imgDiv.style.width="320px";
//imgDiv.style.height="127px";
newPreview.appendChild(imgDiv);
}
//使用removeChild从文档中删除DOM节点
function remove(obj) {
var test = obj;
var children = test.childNodes;
for (i = 0; i < children.length; i++) {
test.removeChild(children[i]);
}
}
</script>
2、在页面中添加DIV层来展示，IE9默认不显示预览，可参考title的说明设置
HTML页面代码：
<div style="padding:5px;margin-left: -5px">
<table border="0" style="width:94%;border-collapse:collapse;background:#fff;" title="无显示帮助：第一步：工具-- Internet选项-- 安全-- 自定义级别;第二步：向下拖，一直看到“将文件上载到服务器时包含本地目录路径”;第三步：选择启用。">
<tr>
<th style="background-color:#f0f0f0; height:20px;padding:5px;border:1px solid #ccc;font-weight: bolder;text-align: center;" width="40%">选择图片</th>
<th style="background-color:#f0f0f0; height:20px;padding:5px;border:1px solid #ccc;font-weight: bolder;text-align: center;" width="70%">预览图</th>
</tr>
<tr>
<td style="padding:5px;border:1px solid #ccc;"><INPUT id=engineroom_layout_addr class=inputbox name=engineroom_layout_addr/></td>
<td align="center" style="padding:5px;border:1px solid #ccc;"><img id="idImg" style="display:none"/><div id="newPreview"></div></td>
</tr>
</table>
<script type="text/javascript">
var addrObject = document.getElementById("engineroom_layout_addr");
addrObject.style.display = "none";//把机房显示输入框隐藏
Ext.get('file_engineroom_layout_addr').on('change',function(obj){
//crmsUtil.previewImg(obj.target,"idImg",300,200);//只适用于IE6
PreviewImg(obj);
});
if(addrObject.value != ''){
var img_object = document.getElementById("idImg");
img_object.style.display = "inline";
img_object.src = addrObject.value;
if (!img_object.width || img_object.width > 300) {
img_object.width = 300;
}
if (!img_object.height || img_object.height > 200) {
img_object.height = 200;
}
}
</script>
</div>
- 大小: 86 KB
分享到：
相关推荐
兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览
js上传前预览图片，兼容IE,firefox,google
纯javascript实现上传图片前图片预览，判断图片大小，兼容ie-7到10 firefox chrome，非常不错，分享给大家。
Jsp图片预览程序（含Java源码） 目前，很多网站都在为提升用户体验而努力，想尽多种办法让用户在网站上...程序中的JavaScript部分兼容ie6/7/8, firefox 3.5.5以及opera 10、safari 4.0.4、 chrome 3.0 等多种浏览器。
javascript 上传并预览图片（兼容IE，6,7,8,9+,谷歌,火狐,Safari）移动端也可以。
1 上传图片前实现本地预览图片。 2 兼容ie,firefox 3 实现判断文件大小。火狐下实现了上传前判断图片大小，ie下目前是采用ActiveXObject方法，但会弹框提示，不友好，提供ajax方式后台判断文件大小。 4 判断图片类型...
1. 解压 PDF前端预览功能.zip 压缩包，复制到网站开发目录； 2. 调用方式：window.open("Scripts/lib/PDF/web/viewer.... 3. 能支持多种浏览，火狐、IE、谷歌、360等，能支持本地文件直接浏览。
JavaScript解决预览上传问题，目前支持IE7、IE8、火狐浏览器； 上网查找了大量资料，然而能用的代码却寥寥无几；竟然弄出来了，就共享给大家。
NULL 博文链接：https://1017401036.iteye.com/blog/2098990
不论您使用的是 IE6 还是 IE7,还是火狐、均可以看到以下预览。 虽然可以在ie6,ie7,火狐预览、但在谷歌浏览器还是不行、哪位高人要是有更好的办法浏览、能否交流交流 收藏下，qq：253930407
js预览图片兼容ie6，7，8，火狐等浏览器
主要介绍了兼容最新firefox、chrome和IE的javascript图片预览实现代码,测试了浏览器firefox6、firefox12、chrome 25.0.1364.172 m、IE6-IE10 都兼容,需要的朋友可以参考下
主要介绍了js实现兼容IE、Firefox的图片缩放代码,涉及JavaScript操作图片元素的相关技巧,需要的朋友可以参考下
js上传图片预览 兼容 ie 火狐
jquery+html5实现图片上传并裁切功能，上传图片前可预览裁切效果，显示裁切框，应用jquery.Jcrop.min.js实现，兼容性方面，适用浏览器：FireFox、Chrome、Opera. 不支持IE8、360、Safari、傲游、搜狗、世界之窗。本...
javascript 上传图片预览效果，兼容：ie6/7/8, firefox 3.5.5
JUploader-兼容IE9,10,11的多图预览上传,兼容目前最新的chrome和firefox浏览器；基于 ajaxfileupload.js，支持本地图预览，上传时loadding状态显示。最少代码集成，简单易用。
Flash头像上传组件功能介绍 1.上传并预览，用户可以任意选择区域，支持头像旋转 2.支持上传成功，js 回调函数 3.无论图片过大还是过小...7.兼容性好，任何浏览器 IE10, IE9, IE8, IE7 IE 6 ,firefox, chrome 都正常使用
功能介绍： 1.上传并预览，用户可以任意选择区域，支持头像旋转 2.支持上传成功，js 回调函数 3.无论图片过大还是过小，都可以按照...兼容性好，任何浏览器 IE10, IE9, IE8, IE7 IE 6 ,firefox, chrome 都正常使用