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

代码大致如下

[HTML]  纯文本查看  复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
     < 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]  纯文本查看  复制代码
?
01
02
03
04
function picchange() {
$("#btnupload").click();
}
}

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

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

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

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

[CSS]  纯文本查看  复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
<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>

这个大部分美工都能写。

猜你喜欢

转载自blog.csdn.net/x619y/article/details/80448733