[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>
[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>