IE下面JavaScript提交form表单提交失败，JS报拒绝访问

站长苏飞 · 发表于 2014-8-26 18:09:35

代码大致如下

[HTML] 纯文本查看 复制代码

    <script>
        function picchange() {
            if (document.all) {
                var b = document.getElementById("btnupload");
                b.click();
            }
            else {
                var evt = document.createEvent("MouseEvents");
                evt.initEvent("click", true, true);
                document.getElementById("btnupload").dispatchEvent(evt);
            }
        }
        function picclick() {
            if (document.all) {
                document.getElementById("photoFile").click();
            }
            else {
                var evt = document.createEvent("MouseEvents");
                evt.initEvent("click", true, true);
                document.getElementById("photoFile").dispatchEvent(evt);
            }
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="uploadAvatar">
        <input name="photoFile" type="file" id="photoFile" runat="server" />
        <div class="btnUpload">
            <asp:Button ID="btnupload" runat="server" Style="display: none;" Text="保 存">
            </asp:Button>
    </form>
</body>
</html>

开始我没详细看代码，以为是兼容性问题。也想过会不会是代码写法问题，于是换成了Jquery写法

[HTML] 纯文本查看 复制代码

function picchange() {
$("#btnupload").click();
}
}

还是一样没有效果。
<div class="btnUpload">
看到了这一行我傻了，
原来是安全问题。像IE 360等浏览器，是不允许程序单击上传控件来上传文件的，只能通过鼠标单击。

而这里是调用的事件。所以肯定是不行的。

那怎么解决呢。很简单，让美工解决。

把DIv定位到这个控件上面。单击是同时单击就OK了。

[CSS] 纯文本查看 复制代码

    <style type="text/css">
        #uploadAvatar { font: 12px nomral 'Microsoft YaHei'; width: 362px; height: 100%; overflow: hidden; }
        #uploadAvatar .avatarBox { margin-top: 20px; }
        #uploadAvatar input[type=file] { opacity: 0; filter: alpha(opacity=0); position: absolute; top: -50px; }
        #uploadAvatar .btnUpload { width: 200px; height: 36px; cursor: pointer;  }
        #uploadAvatar .uploadCut { width: 202px; height: 100%; overflow: hidden; float: left; }
        #uploadAvatar .uploadCut p { color: #999; }
        #uploadAvatar .cutbg { width: 200px; height: 200px; border: 1px solid #e5e5e5;}
        #uploadAvatar .createAvatar { width: 102px; text-align: center; float: right; }
        #uploadAvatar .createAvatar .avatar { width: 100px; height: 100px; border: 1px solid #e5e5e5; border-radius: 50px; }
        #uploadAvatar .createAvatar img { width: 100px; height: 100px; border-radius: 50px; }
        #uploadAvatar .btnSave { color: #fff; font: 12px nomral 'Microsoft YaHei'; width: 70px; height: 24px; line-height: 24px; background: #ee5f00; text-align: center; border-radius: 3px; border: 0; margin: 0 15px; cursor: pointer; }
        #photo { height: 199px; width: 201px; }
    </style>

这个大部分美工都能写。

站长苏飞 · 发表于 2014-8-26 18:10:16

参考文章http://www.qttc.net/201305334.html

Cheungnotes · 发表于 2014-8-26 20:22:45

受教了学习中……

		自动登录	找回密码
密码			马上注册

[JavaScript] IE下面JavaScript提交form表单提交失败，JS报拒绝访问