代码大致如下
[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>
这个大部分美工都能写。
|