Electronic photo album system (vi) Photo list display

1. Function Description

When the user login, as long as the user has uploaded pictures to the service, then the system will display the user's picture. And with pagination in the form show, three per page. Of course, as long as the user put the mouse on the corresponding list of pictures, then the right to display the picture, while the bottom of the picture to display information. As shown in the figure.

2. Conceptual Realization

Here we need to define a <DIV/> on the HTML page, for example, a name called "list." It is mainly used to display pictures in lists. But the key function may be in how to read out these pictures, and put these pictures in our prescribed <div/>, there is the mouse to put up, how the right is displayed. Here, we may be divided into two steps to complete. The first step is to getphotoservlet the class to get the picture and display it in a list, and the second side may be the Showimgservlet to display the current picture. 3. Concrete implementation

On the HTML page, we need to design the following tag.

<!--the elements that display the list of photos-->
	<td width= "height= 440" valign= "Top" >
	<div align= "center" >
 
1) The list shows the picture. To display a picture on the list, we need to be aware that each time we request a new page of pictures to be displayed, we need to first empty the information in the list, which is out.println ("var list = $ (' #list '). empty ();"); This word to achieve. At the same time, we also need to use the PrintWriter defined out variables to write HTML tags to the client. Here is the picture information that is written to get the display.

@WebServlet (urlpatterns= "/getphoto") public class Getphotoservlet extends Baseservlet {@Override protected void Servic E (httpservletrequest request, httpservletresponse response) throws Servletexception, IOException {HttpSession Sessi
		On = Request.getsession (true);
		Gets the system current user, the current page number of the photo list, String name = (string) session.getattribute ("Curuser") from HttpSession;
		Object pageobj = Session.getattribute ("Curpage"); If curpage in HttpSession is null, set the current face page to be the first page int curpage = Pageobj = = null?
		1: (Integer) pageobj;
		Response.setcontenttype ("TEXT/JAVASCRIPT;CHARSET=GBK");
		Gets the output stream printwriter out = Response.getwriter ();
			try {list<photoholder> photos = As.getphotobyuser (name, curpage);
			
			Empty the element out.println with ID list ("var list = $ (' #list '). empty ();"); for (Photoholder Ph:photos) {out.println ("list.append" <div align= ' center ' > "+" </div>\"); catch (Albumexception ex) {out.println ("alert" + ex.getmessage () +) Please try again.
		')");
 }
	}
	
}
 
2 The movement of the mouse needs to display the corresponding current picture. So in the above method, we may need to use the onmouseover method. However, we also invoke the Showimgservlet class by onmouseover functions. This time, we still use jquery method to achieve, but we want to display picture information will not appear garbled, then need to use encodeURI method, because we call Showimgservlet, we are using get to request. Here is the Jquey method.

Display photo
function showimg (fileName, imgname)
{
	//Select one encoding
	imgname = encodeURI (imgname);
	$.getscript ("showimg?img=" + fileName + "&imgname=" + imgname);
}
 
After entering the Showimgservlet, we also want to encode again. So more trouble, we suggest that you use JQuery's Post method request. The following is to write the current picture to the client, and the implementation method is also through the PrintWriter definition variable out.

 @WebServlet (urlpatterns= "/showimg") public class Showimgservlet extends Baseservlet {@Override prot
		ected void Service (HttpServletRequest request, httpservletresponse response) throws Servletexception, IOException {
		String img = request.getparameter ("img");
		Two times to encode the conversion request.setcharacterencoding ("GBK");
		String imgname = Request.getparameter ("Imgname");
		HttpSession session = Request.getsession (true);
		The user is browsing the picture into the HttpSession session.setattribute ("curimg", IMG);
		Session.setattribute ("width", img_width);
		Session.setattribute ("height", img_height);
		Response.setcontenttype ("TEXT/JAVASCRIPT;CHARSET=GBK");
		Gets the output stream printwriter out = Response.getwriter (); Out.println ("$ (' #show ')." attr (' src ', ' uploadfiles/' + img + "')" + ". attr (' width ', '" + Img_width + ")" + ". attr (' He
		Ight ', ' "+ Img_height +");
		Out.println ("$ (' #imgInf '). empty ();");
	Out.println ("$ (' #imgInf '). Append ('