苏飞论坛

标题: IE下面JavaScript提交form表单提交失败,JS报拒绝访问 [打印本页]

作者: 站长苏飞    时间: 2014-8-26 18:09
标题: IE下面JavaScript提交form表单提交失败,JS报拒绝访问
代码大致如下

[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
参考文章http://www.qttc.net/201305334.html
作者: Cheungnotes    时间: 2014-8-26 20:22
受教了学习中……




欢迎光临 苏飞论坛 (http://www.sufeinet.com/) Powered by Discuz! X3.4