贰拾肆樵 2016-05-13 01:50 采纳率: 50%
浏览 1049
已采纳

求助: 为何我这个代码里的事件会自动被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条回答 默认 最新

  • Go 旅城通票 2016-05-14 03:03
    关注

    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"
            });
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥50 永磁型步进电机PID算法
  • ¥15 sqlite 附加(attach database)加密数据库时,返回26是什么原因呢?
  • ¥88 找成都本地经验丰富懂小程序开发的技术大咖
  • ¥15 如何处理复杂数据表格的除法运算
  • ¥15 如何用stc8h1k08的片子做485数据透传的功能?(关键词-串口)
  • ¥15 有兄弟姐妹会用word插图功能制作类似citespace的图片吗?
  • ¥200 uniapp长期运行卡死问题解决
  • ¥15 latex怎么处理论文引理引用参考文献
  • ¥15 请教:如何用postman调用本地虚拟机区块链接上的合约?
  • ¥15 为什么使用javacv转封装rtsp为rtmp时出现如下问题:[h264 @ 000000004faf7500]no frame?