弹出 悬浮层, 上传图片控件
A.aspx
<script src="js/RestoreImage.js" type="text/javascript"></script>
<script type="text/javascript">
function show_classify_div() {
var iWidth = document.documentElement.clientWidth;
var iHeight = document.documentElement.clientHeight;
var oShow = document.getElementById('classify_div');
var bgObj = document.createElement("div");
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
bgObj.setAttribute("id", "classify_divbg");
bgObj.style.width = Math.max(document.body.scrollWidth, iWidth) + "px";
bgObj.style.height = document.body.clientHeight + "px";
document.body.appendChild(bgObj);
oShow.style.display = 'block';
oShow.style.left = (iWidth - oShow.clientWidth) / 2 + document.documentElement.scrollLeft + "px";
//oShow.style.top = (iHeight-oShow.clientHeight)/2+scrolltop+"px";
oShow.style.top = Math.max(70, (iHeight - oShow.clientHeight) / 2 + scrolltop) + "px";
var oClose = document.createElement("close_div");
oClose.innerHTML = "<img src='images/close.png' title='关闭'>"; //×
oShow.appendChild(oClose);
oClose.onclick = function () {
oShow.style.display = 'none';
oShow.removeChild(this);
document.body.removeChild(bgObj);
}
btn_Image.onclick = function () {
oShow.style.display = 'none';
oShow.removeChild(this);
document.body.removeChild(bgObj);
}
}
</script>
-----------------
<script language="javascript" type="text/javascript">
function showdiv() {
document.getElementById("bg").style.display = "block";
document.getElementById("show").style.display = "block";
}
function hidediv() {
var newimage = $(".jquery-bitmapcutter-newimg")[0].src
document.getElementById("getimage").setAttribute("src", newimage);
document.getElementById("bg").style.display = 'none';
document.getElementById("show").style.display = 'none';
}
function postimagess() {
var newimage = $(".jquery-bitmapcutter-newimg")[0].src
alert(newimage);
var str2 = newimage.charAt(50);
alert(str2);
if (str2 == "=") {
document.getElementById("bg").style.display = "block";
}
}
function postget() {
document.getElementById("bg").style.display = "block";
}
//
var popUpWin = 0;
function PopUpWindow(URLStr, left, top, width, height, newWin, scrollbars) {
if (typeof (newWin) == "undefined")
newWin = false;
if (typeof (left) == "undefined")
left = 100;
if (typeof (top) == "undefined")
top = 0;
if (typeof (width) == "undefined")
width = 800;
if (typeof (height) == "undefined")
height = 760;
if (newWin) {
open(URLStr, '', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=' + scrollbars + ',resizable=yes,copyhistory=yes,width=' + width + ',height=' + height + ',left=' + left + ', top=' + top + ',screenX=' + left + ',screenY=' + top + '');
return;
}
if (typeof (scrollbars) == "undefined") {
scrollbars = 0;
}
if (popUpWin) {
if (!popUpWin.closed) popUpWin.close();
}
popUpWin = open(URLStr, 'popUpWin', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=' + scrollbars + ',resizable=yes,copyhistory=yes,width=' + width + ',height=' + height + ',left=' + left + ', top=' + top + ',screenX=' + left + ',screenY=' + top + '');
popUpWin.focus();
}
</script>
<script src="js/UploadImageJs/zDialog.js" type="text/javascript"></script>
----------
<body>
<form id="form1" runat="server">
<%-- ////--%>
<div class="classify_div" id="classify_div" style="width: 285px;">
<div class="">
<!--当前照片-->
<div id="CurruntPicContainer" runat="server">
<div class="title">
<b>当前照片</b></div>
<div class="photocontainer">
<asp:Image ID="imgphoto" runat="server" ImageUrl="~/image/man.GIF" />
</div>
</div>
<!--Step 2-->
<div id="Step2Container" runat="server" visible="false">
<div class="title">
<b>裁切头像照片</b></div>
<div class="uploadtooltip">
您可以拖动照片以裁剪满意的头像</div>
<div id="Canvas" class="uploaddiv">
<div id="ImageDragContainer">
<asp:Image ID="ImageDrag" runat="server" ImageUrl="~/image/blank.jpg" CssClass="imagePhoto"
ToolTip="" />
</div>
<div id="IconContainer">
<asp:Image ID="ImageIcon" runat="server" ImageUrl="~/image/blank.jpg" CssClass="imagePhoto"
ToolTip="" />
</div>
</div>
<div class="uploaddiv">
<table>
<tr>
<td id="Min">
<img alt="缩小" src="image/_c.gif" onmouseover="this.src='image/_c.gif';" onmouseout="this.src='image/_h.gif';"
id="moresmall" class="smallbig" />
</td>
<td>
<div id="bar">
<div class="child">
</div>
</div>
</td>
<td id="Max">
<img alt="放大" src="image/c.gif" onmouseover="this.src='image/c.gif';" onmouseout="this.src='image/h.gif';"
id="morebig" class="smallbig" />
</td>
</tr>
</table>
</div>
<%-- <input id="btnRes" type="button" onclick="showNew()" value="恢复默认" />--%>
<div class="uploaddiv">
<asp:Button ID="btn_Image" runat="server" Text="保存头像" OnClick="btn_Image_Click" />
<input id="Button1" type="button" onclick="showNew()" value="恢复默认" />
</div>
<div style="display: none">
<%-- <div>--%>
图片实际宽度：
<asp:TextBox ID="txt_width" runat="server" Text="1"></asp:TextBox><br />
图片实际高度：
<asp:TextBox ID="txt_height" runat="server" Text="1"></asp:TextBox><br />
距离顶部：
<asp:TextBox ID="txt_top" runat="server" Text="82"></asp:TextBox><br />
距离左边：
<asp:TextBox ID="txt_left" runat="server" Text="73"></asp:TextBox><br />
截取框的宽：
<asp:TextBox ID="txt_DropWidth" runat="server" Text="120"></asp:TextBox><br />
截取框的高：
<asp:TextBox ID="txt_DropHeight" runat="server" Text="120"></asp:TextBox><br />
放大倍数：
<asp:TextBox ID="txt_Zoom" runat="server"></asp:TextBox>
</div>
</div>
</div>
<div class="">
<!--Step 1-->
<div id="Step1Container">
<div class="title">
<b>更换照片</b></div>
<div id="uploadcontainer">
<div class="uploadtooltip">
请选择新的照片文件，文件需小于2.5MB</div>
<div class="uploaddiv">
<asp:FileUpload ID="fuPhoto" runat="server" ToolTip="选择照片" /></div>
<div class="uploaddiv">
<asp:Button ID="btnUpload" runat="server" Text="上 传" OnClick="btnUpload_Click" /></div>
</div>
</div>
</div>
</div>
<%-- ////—%>
------------------
<div>
<span>分类图片：</span> <input type="button" id="but" onclick="show_classify_div()"
value="上传图片" />
<img id="getimage" alt="" runat="server" style="width: 170px; height: 170px" />
</div>
=======================
A.aspx.cs
//#region lei
private const string savepath = "Up/Upsave" + "/";
protected void btnUpload_Click(object sender, EventArgs e)
{
if (fuPhoto.PostedFile != null && fuPhoto.PostedFile.ContentLength > 0)
{
string ext = System.IO.Path.GetExtension(fuPhoto.PostedFile.FileName).ToLower();
if (ext != ".jpg" && ext != ".jepg" && ext != ".bmp" && ext != ".gif")
{
return;
}
string filename = "near_" + DateTime.Now.ToString("yyyyMMddHHmmss") + ext;
string path = "~/Up/" + filename;
fuPhoto.PostedFile.SaveAs(Server.MapPath(path));
ImageDrag.ImageUrl = path;
ImageIcon.ImageUrl = path;
Step2Container.Visible = true;
CurruntPicContainer.Visible = false;
Page.ClientScript.RegisterStartupScript(this.GetType(), "ShowUploadImgDiv", "<script type='text/javascript'>;show_classify_div();</script>");
}
else
{
//do some thing;
}
}
protected void btn_Image_Click(object sender, EventArgs e)
{
int imageWidth = Int32.Parse(txt_width.Text);
int imageHeight = Int32.Parse(txt_height.Text);
int cutTop = Int32.Parse(txt_top.Text);
int cutLeft = Int32.Parse(txt_left.Text);
int dropWidth = Int32.Parse(txt_DropWidth.Text);
int dropHeight = Int32.Parse(txt_DropHeight.Text);
string filename = CutPhotoHelp.SaveCutPic(Server.MapPath(ImageIcon.ImageUrl), Server.MapPath(savepath), 0, 0, dropWidth,
dropHeight, cutLeft, cutTop, imageWidth, imageHeight);
this.imgphoto.ImageUrl = savepath + filename;
this.getimage.Src = this.imgphoto.ImageUrl;
Page.ClientScript.RegisterStartupScript(this.GetType(), "step3", "<script type='text/javascript'>Step3();</script>");
}
//#endregion