This is a small demand from a customer. The image upload function displays thumbnails on the display page, move the mouse over the display source image, and click the thumbnail to open a new page to display the source image. This is probably the case.
Directly paste code
<% @ Page Language = "C #" autoeventwireup = "true" codebehind = "pic_xx +. aspx. cs" inherits = "web_ui.pic_xx _" %>
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> </title>
<Style type = "text/CSS">
# Sky_style {
Position: absolute;
Border: 1px solid # CCC;
Background: #333;
Padding: 5px;
Display: none;
Color: # FFF;
}
</Style>
<SCRIPT src = "JS/jquery-1.4.4.min.js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
This. imagepreview = function (){
Xoffset = 10;
Yoffset = 30;
$ ("A. sky_style"). Hover (function (e ){
This. t = This. title;
This. Title = "";
VaR c = (this. T! = "")? "<Br/>" + this. T :"";
$ ("Body "). append ("<p id = 'sky _ style'> ");
$ ("# Sky_style ")
. CSS ("TOP", (E. Pagey-xoffset) + "PX ")
. CSS ("Left", (E. pagex + yoffset) + "PX ")
. Fadein ("fast ");
},
Function (){
This. Title = This. t;
$ ("# Sky_style"). Remove ();
});
$ ("A. sky_style"). mousemove (function (e ){
$ ("# Sky_style ")
. CSS ("TOP", (E. Pagey-xoffset) + "PX ")
. CSS ("Left", (E. pagex + yoffset) + "PX ");
});
};
$ (Document). Ready (function (){
Imagepreview ();
});
// The following is the solution I used in the project to solve the problem of refreshing the image and returned the method for losing the JQ effect.
Function load (){
SYS. webforms. pagerequestmanager. getinstance (). add_endrequest (endrequesthandler );
}
Function endrequesthandler (){
Imagepreview ();
}
</SCRIPT>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Div>
<A id = "A1" href = "~ /Images/dellr710.jpg "runat =" server "class =" sky_style "target =" _ blank ">
</a>
</Div>
</Form>
</Body>
</Html>
Backend. CS
// It is used to solve the updatepale problem. After refreshing, The updatepale effect is lost.
Protected void page_load (Object sender, eventargs E)
{
This. registerstartupscript ("no way", "<SCRIPT type = \" text/JavaScript \ "> load (); </SCRIPT> ");
.....
}
In addition, I share the thumbnail generation method:
Protected void btn_pic_click (Object sender, eventargs E)
{
// Check whether the format of the uploaded image is valid
Bool fileok = false;
String fileextension = system. Io. Path. getextension (uploadfile. postedfile. filename). tolower (); // get the extension name of the image
String [] geshi = {". GIF", ". PNG", ". jpeg", ". jpg", ". BMP "};
For (INT I = 0; I <geshi. length; I ++)
{
If (fileextension = geshi [I])
{
Fileok = true;
}
}
If (fileok) // The format of the uploaded image is correct.
{
// Generate the source Image
Byte [] ofilebyte = new byte [This. uploadfile. postedfile. contentlength];
System. Io. Stream ostream = This. uploadfile. postedfile. inputstream;
System. Drawing. Image oimage = system. Drawing. image. fromstream (ostream );
Int oWidth = oImage. Width; // source Image Width
Int oHeight = oImage. Height; // source Image Height
Int tWidth = 50; // you can specify the initial width of a thumbnail.
Int tHeight = 50; // you can specify the initial height of a thumbnail.
// Calculate the width and height of the thumbnail in proportion.
If (oWidth> = oHeight)
{
THeight = (int) Math. Floor (Convert. ToDouble (oHeight) * (Convert. ToDouble (tWidth)/Convert. ToDouble (oWidth )));
}
Else
{
Twidth = (INT) math. Floor (convert. todouble (owidth) * (convert. todouble (theight)/convert. todouble (oheight )));
}
// Generate the thumbnail image
Bitmap timage = new Bitmap (twidth, theight );
Graphics G = graphics. fromimage (timage );
G. interpolationmode = system. Drawing. drawing2d. interpolationmode. High; // set the high quality interpolation method.
G. smoothingmode = system. Drawing. drawing2d. smoothingmode. highquality; // set high quality and smooth Low Speed
G. Clear (color. Transparent); // clear the canvas and fill it with a transparent background color. This sentence is very important, otherwise the image will be blurred.
G. drawimage (oimage, new rectangle (0, 0, twidth, theight), new rectangle (0, 0, owidth, oheight), graphicsunit. pixel); // re-paint
// Create two folders for saving the path of the source image and the path of the scaling chart respectively.
String filename = uploadfile. postedfile. filename; // obtain the image name.
String o_server = "ofiles/" + system. datetime. Now. tostring ("yyyy-mm-dd") + "/";
String save_o_server = server. mappath ("~ /"+ O_server );
If (! Directory. exists (save_o_server) // create
{
Directory. createdirectory (save_o_server );
}
Uploadfile. postedfile. saveas (save_o_server + filename); // save it to the server.
// Zoom out
String t_server = "tfiles/" + system. datetime. Now. tostring ("yyyy-mm-dd") + "/";
String save_t_server = server. mappath ("~ /"+ T_server );
If (! Directory. exists (save_t_server) // create
{
Directory. createdirectory (save_t_server );
}
// Uploadfile. postedfile. saveas (save_t_server + filename); // save it to the server
Timage. Save (save_t_server + filename, system. Drawing. imaging. imageformat. JPEG); // save it to the server.
Lab_content_img IMG = new lab_content_img ();
If (request. querystring ["contentid"]! = NULL)
{
IMG. img_contentid = convert. toint32 (request. querystring ["contentid"]);
}
IMG. img_path = "~ /"+ O_server + filename; // physical path for saving the source Image
IMG. img_sl_path = "~ /"+ T_server + filename; // physical path for saving the thumbnail
Lab_content_imgbr img_br = new lab_content_imgbr ();
Try
{
Img_br.insert_pic (IMG );
This. Page. clientscript. registerstartupscript (this. GetType (), "", "<SCRIPT> alert ('image uploaded successfully! '); Window. returnvalue = '1'; window. Close (); </SCRIPT> ");
}
Catch (Exception ex)
{
This. Page. ClientScript. RegisterStartupScript (this. GetType (), "", "alert ('upload image failed! ') ", True );
}
Finally
{
// Release resources
OImage. Dispose ();
G. Dispose ();
Timage. Dispose ();
}
}
}
(Perform two image demos at Will ):
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
