js实现图片上传前的预览
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
js实现图片上传前的预览,实现完美兼容Firefox3,IE6,IE7,IE8和IE9的显示问题
1、脚本,把下面代码加到
与之间Js代码
1.
2.function PreviewImg(imgFile){
3.document.getElementById("idImg").style.display = "none";//隐藏初
始化图片的显示,让过滤器显示
4.var newPreview=document.getElementById("newPreview");
5.remove(newPreview);
6.
7.var imgDiv=document.createElement("div");
8.document.body.appendChild(imgDiv);
9.imgDiv.style.filter="progid:DXImageTransform.Microsoft.AlphaIma
geLoader(sizingMethod=scale)";
10.imgDiv.filters.item("DXImageTransform.Microsoft.AlphaImageLoade
r").src=imgFile.target.value;
11.var img_object =
document.getElementById("engineroom_layout_addr");
12.img_object.style.display = "inline";
13.img_object.src = addrObject.value;
14.if (!img_object.width || img_object.width > 300) {
15.imgDiv.style.width = "300px";
16.}
17.if (!img_object.height || img_object.height > 200) {
18.imgDiv.style.height = "200px";
19.}
20.addrObject.style.display = "none";
21.//imgDiv.style.width="320px";
22.//imgDiv.style.height="127px";
23.newPreview.appendChild(imgDiv);
24.
25.}
26.//使用removeChild从文档中删除DOM节点
27.function remove(obj) {
28.var test = obj;
29.var children = test.childNodes;
30.for (i = 0; i < children.length; i++) {
31.test.removeChild(children[i]);
32.}
33.}
34.
2、在页面中添加DIV层来展示,IE9默认不显示预览,可参考title的说明设置
HTML页面代码:
Html代码
1.
2.
选择图片 | 预览图 |
---|---|
id=engineroom_layout_addr class=inputbox name=engineroom_layout_addr/> | id="newPreview"> |
12.
13.var addrObject =
document.getElementById("engineroom_layout_addr");
14.addrObject.style.display = "none";//把机房显示输入框隐藏
15.Ext.get('file_engineroom_layout_addr').on('change',function(obj
){
16.//crmsUtil.previewImg(obj.target,"idImg",300,200);//只适用于
IE6
17.PreviewImg(obj);
18.});
19.if(addrObject.value != ''){
20.var img_object = document.getElementById("idImg");
21.img_object.style.display = "inline";
22.img_object.src = addrObject.value;
23.if (!img_object.width || img_object.width > 300) {
24.img_object.width = 300;
25.}
26.if (!img_object.height || img_object.height > 200) {
27.img_object.height = 200;
28.}
29.}
30.
31.