Extjs-based album System Design

Extjs-based album System DesignI. system structure the system structure is divided into four parts: 1. Image Manager (photomanage), image classification management, image Directory management, and Image Upload control. 2. The image browser (photosee), similar to ACDSee, controls the previous page, next page, zoom in, and zoom out of the four arrow keys on the keyboard. You can add remarks to each image to display the EXIF information of the image and comment on the image. 3. The image search engine can search for image remarks, image titles, and EXIF information of images. 4. The background Manager (Web Management) manages user accounts and passwords. Ii. system design focuses on the implementation of an upload control, image browser, and image search. 1. Image Upload control. The Image Upload control is written in Java Applet and released in JNLP mode. First, write an image browser using Java Applet (1) to easily select the image to be stored. The FTP is used for uploading. the FTP server uses the Apache open-source project ftpserver. During uploading, the image is scaled and the image name is randomly generated. After uploading an image to an FTP server, you must submit the image information (such as the path, name, and EXIF information) to the server. A digital signature is required for the javaapplet to browse the local image file. Figure 12: The image browser is based on extjs. the browser's window layout is left and right. The left side is the image information, navigation bar, and the right side is the Image Browsing area. The Ajax technology is used to display images without screen flushing. The creatphoto () function is executed for each image. Function creatphoto () {// create an IMG, and run oldimg = objdivimg every time a graph is opened. firstchild; // <old img> objdivimg. removechild (oldimg); // Delete the old IMG objdivimg. style. visibility = "hidden"; objimg = document. createelement ("IMG"); objimg. onload = function () {originalwidth = objimg. width; originalheight = objimg. height; If (isfitscreen) {creatfitscreen ();} else {creatoriginalscreen ();} ongetremark (galbuminfo [photoindex] [2]); objdivimg. style. visibility = "visible" ;}; if (ext. isie) {// set the position: absolute; to move the object. setattribute ("classname", "imgmain");} else {objimg. setattribute ("class", "imgmain");} objdivimg. appendchild (objimg); // create an IMG objimg. src = common_pics_dir + galbuminfo [photoindex] [1] + '/' + galbuminfo [photoindex] [0];}