求助: 为何我这个代码里的事件会自动被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();*/
                    }
    }
}

1个回答

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"
        });
}
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐