问题描述
- 求助： 为何我这个代码里的事件会自动被window对象触发
-
用onchange绑定了一个事件，然而每次刷新页面会自动触发这个事件，alert了事件源获得了window对象
求解~~~~
代码如下<!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>图片上传预览 ie6,7,8, firefox</title> </head> <body> <input type="file" multiple="true" id="picPath" name="imgPath" /> <div id="Preview"> <img id="Preview" /> <img id="Preview2" /> </div> </body> <script src="imageUpload.js"></script> <script> document.getElementById("picPath").onchange = PreviewImage({ PreviewElementId : "Preview", fileInput : this, width : "120px", height : "120px" }); </script> </html>下面是JS方法（未完成的方法）
/*图片格式验证*/ function checkPic() { var picPath = document.getElementById("picPath").value; var type = picPath.substring(picPath.lastIndexOf(".") + 1, picPath.length).toLowerCase(); if (type != "jpg" && type != "bmp" && type != "gif" && type != "png") { alert("请上传正确的图片格式"); return false; } return true; } //图片预览 function PreviewImage(jsonObj) { var upload = jsonObj.fileInput; var PreviewElementId = jsonObj.PreviewElementId; alert(upload); var width = jsonObj.width; var height = jsonObj.height; if (checkPic()) { var imgPath; //图片路径 var imgPath2; var Browser_Agent = navigator.userAgent; //判断浏览器的类型 if (Browser_Agent.indexOf("Firefox") != -1) { //火狐浏览器 imgPath = window.URL.createObjectURL(upload.files[0]); /*需要添加是否双图判断*/ imgPath2 = window.URL.createObjectURL(upload.files[1]); document.getElementById(divImage).innerHTML = "<img id='imgPreview' src='" + imgPath + "' width='" + width + "' height='" + height + "'/>"; document.getElementById(divImage2).innerHTML = "<img id='imgPreview' src='" + imgPath2 + "' width='" + width + "' height='" + height + "'/>"; } else { /*多地址解析*/ var valuesArray = upload.value.split(","); var imgSrc1 = valuesArray[0]; var imgSrc2 = valuesArray[1]; /*容器设置*/ var localImagId1 = document.getElementById(divImage); var localImagId2 = document.getElementById(divImage2); //必须设置初始大小 //图片异常的捕捉，防止用户修改后缀来伪造图片 //filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' http://') try { localImagId1.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader((enabled='true' ,src='" + imgSrc1 + "');"; alert(localImagId1.style.filter); /*localImagId1.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc1; localImagId2.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc2;*/ } catch (e) { alert(e); return false; } /* imgObjPreview1.style.display = 'none'; imgObjPreview2.style.display = 'none';*/ /*document.selection.empty();*/ } } }
解决方案
document.getElementById("picPath").onchange = PreviewImage({
这句每次都执行了PreviewImage函数，此环境下this==window，然后将PreviewImage返回值作为onchange的事件，PreviewImage没有return返回值会默认返回undefined所以onchange为undefined没有绑定，改成这样才能绑定事件
document.getElementById("picPath").onchange =function(){
PreviewImage({
PreviewElementId : "Preview",
fileInput : this,//此时this才是这个dom对象
width : "120px",
height : "120px"
});
}
时间： 2024-10-27 10:53:36