项目结构:
项目首页:
注册页面:
上传图片:
效果图一:
效果图二:
效果图三:
=============================================================
下面是代码部分
=============================================================
需要用到的数据库SQL:
复制代码 代码如下:
drop database if exists db_ajax;
create database db_ajax;
use db_ajax;
create table user_table
(
user_id int auto_increment primary key,
name varchar(255) unique,
pass varchar(255)
);
create table photo_table
(
photo_id int auto_increment primary key,
title varchar(255),
fileName varchar(255),
owner_id int,
foreign key(owner_id) references user_table(user_id)
);
/ajax_0500_jQuery_album/WebRoot/album.html
复制代码 代码如下:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
相片列表 |
|
/ajax_0500_jQuery_album/WebRoot/WEB-INF/web.xml
复制代码 代码如下:
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">
/ajax_0500_jQuery_album/WebRoot/WEB-INF/applicationContext.xml
复制代码 代码如下:
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
http://www.springframework.org/schema/tx
http://www.springframework.org/schema/tx/spring-tx-2.5.xsd
http://www.springframework.org/schema/aop
http://www.springframework.org/schema/aop/spring-aop-2.5.xsd">
org.hibernate.dialect.MySQLInnoDBDialect
/ajax_0500_jQuery_album/WebRoot/js/album.js
复制代码 代码如下:
$(document).ready(function(){
$.getScript("pageLoad");
//处理地址栏的resultCode参数
var locationStr = document.location.toString();
var resultIndex = locationStr.indexOf("resultCode");
var resultCode = -1;
if (resultIndex > 1)
{
resultCode = locationStr.substring(resultIndex + 11
, resultIndex + 12);
//根据不同的resultCode,系统进行不同处理
switch(resultCode)
{
case "0" :
alert('恭喜你,上传文件成功!');
$('#uploadDiv').dialog('close');
break;
case "1" :
alert('本系统只允许上传JPG、GIF、PNG图片文件,请重试!');
$('#title,#file').val('');
break;
case "2" :
alert('处理上传文件出现错误,请重试!');
$('#title,#file').val('');
break;
}
}
});
function reset()
{
//清空user、pass两个单行文本框
$("#user").val("");
$("#pass").val("");
}
//切换到注册对话框
function changeRegist()
{
//隐藏登录用的两个按钮
$("#loginDiv").hide("500");
//显示注册用的两个按钮
$("#registDiv").show("500");
}
//处理用户登录的函数
function proLogin()
{
//获取user、pass两个文本框的值
var user = $.trim($("#user").val());
var pass = $.trim($("#pass").val());
if (user == null || user == ""
|| pass == null|| pass =="")
{
alert("必须先输入用户名和密码才能登录");
return false;
}
else
{
//向proLogin发送异步、POST请求
$.post("proLogin", $('#user,#pass').serializeArray()
, null , "script");
}
}
//处理用户注册的函数
function regist()
{
//获取user、pass两个文本框的值
var user = $.trim($("#user").val());
var pass = $.trim($("#pass").val());
if (user == null || user == "" || pass == null || pass =="")
{
alert("必须先输入用户名和密码才能注册");
return false;
}
else
{
//向proRegist发送异步、POST请求
$.post("proRegist", $('#user,#pass').serializeArray()
, null , "script");
}
}
//验证用户名是否可用
function validateName()
{
//获取user文本框的值
var user = $.trim($("#user").val());
if (user == null || user == "")
{
alert("您还没有输入用户名!");
return false;
}
else
{
//向validateName发送异步、POST请求
$.post("validateName", $('#user').serializeArray()
, null , "script");
}
}
//周期性地获取当前用户、当前页的相片
function onLoadHandler()
{
//向getPhoto发送异步、GET请求
$.getScript("getPhoto");
//指定1秒之后再次执行此方法
setTimeout("onLoadHandler()", 1000);
}
//显示照片
function showImg(fileName)
{
$.getScript("showImg?img=" + fileName);
// document.getElementById("show").src="uploadfiles/" + fileName + "?now=" + new Date();
// $("#show").attr("src" , "uploadfiles/" + fileName);
}
//处理翻页的函数
function turnPage(flag)
{
$.getScript("turnPage?turn=" + flag);
}
//打开上传窗口
function openUpload()
{
$("#uploadDiv").show()
.dialog(
{
modal: true,
resizable: false,
width: 428,
height: 220,
overlay: {opacity: 0.5 , background: "black"}
});
}
/ajax_0500_jQuery_album/src/com/b510/album/web/base/BaseServlet.java
复制代码 代码如下:
package com.b510.album.web.base;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import org.springframework.context.ApplicationContext;
import org.springframework.web.context.support.WebApplicationContextUtils;
import com.b510.album.service.AlbumService;
/**
*
* @author Hongten
*
*/
public class BaseServlet extends HttpServlet {
private static final long serialVersionUID = -2041755371540813745L;
protected AlbumService as;
// 定义构造器,获得Spring容器的引用
public void init(ServletConfig config) throws ServletException {
super.init(config);
ApplicationContext ctx = WebApplicationContextUtils
.getWebApplicationContext(getServletContext());
as = (AlbumService) ctx.getBean("albumService");
}
}
/ajax_0500_jQuery_album/src/com/b510/album/web/ValidateNameServlet.java
复制代码 代码如下:
package com.b510.album.web;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.b510.album.exception.AlbumException;
import com.b510.album.web.base.BaseServlet;
/**
*
* @author Hongten
*
*/
public class ValidateNameServlet extends BaseServlet {
private static final long serialVersionUID = 9038839276327742641L;
public void service(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
String name = request.getParameter("user");
response.setContentType("text/javascript;charset=GBK");
// 获取输出流
PrintWriter out = response.getWriter();
try {
if (name != null) {
if (as.validateName(name)) {
out.println("alert('恭喜您,该用户名还未使用,你可使用该用户名!');");
} else {
out.println("alert('对不起,该用户名已被他人占用!');");
out.println("$('#user').val('');");
}
} else {
out.println("alert('验证用户名出现异常,请更换用户名重试!');");
}
} catch (AlbumException ex) {
out.println("alert('" + ex.getMessage() + "请更换用户名重试!');");
}
}
}
/ajax_0500_jQuery_album/src/com/b510/album/web/TurnPageServlet.java
复制代码 代码如下:
package com.b510.album.web;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import com.b510.album.exception.AlbumException;
import com.b510.album.vo.PhotoHolder;
import com.b510.album.web.base.BaseServlet;
/**
*
* @author Hongten
*
*/
public class TurnPageServlet extends BaseServlet {
private static final long serialVersionUID = -5097286750384714951L;
public void service(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
String turn = request.getParameter("turn");
HttpSession session = request.getSession(true);
String name = (String) session.getAttribute("curUser");
Object pageObj = session.getAttribute("curPage");
// 如果HttpSession中的curPage为null,则设置当前页为第一页
int curPage = pageObj == null ? 1 : (Integer) pageObj;
response.setContentType("text/javascript;charset=GBK");
PrintWriter out = response.getWriter();
if (curPage == 1 && turn.equals("-1")) {
out.println("alert('现在已经是第一页,无法向前翻页!')");
} else {
// 执行翻页,修改curPage的值。
curPage += Integer.parseInt(turn);
try {
List
// 翻页后没有记录
if (photos.size() == 0) {
out.println("alert('翻页后找不到任何相片记录,系统将自动返回上一页')");
// 重新返回上一页
curPage -= Integer.parseInt(turn);
} else {
// 把用户正在浏览的页码放入HttpSession中
session.setAttribute("curPage", curPage);
}
} catch (AlbumException ex) {
out.println("alert('" + ex.getMessage() + "请重试!')");
}
}
}
}
/ajax_0500_jQuery_album/src/com/b510/album/web/ShowImgServlet.java
复制代码 代码如下:
package com.b510.album.web;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import com.b510.album.web.base.BaseServlet;
/**
*
* @author Hongten
*
*/
public class ShowImgServlet extends BaseServlet {
private static final long serialVersionUID = 1460203270448078666L;
public void service(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
String img = request.getParameter("img");
HttpSession session = request.getSession(true);
// 将用户正在浏览的图片放入HttpSession中。
session.setAttribute("curImg", img);
response.setContentType("text/javascript;charset=GBK");
// 获取输出流
PrintWriter out = response.getWriter();
out.println("$('#show').attr('src' , 'uploadfiles/" + img + "');");
}
}
/ajax_0500_jQuery_album/src/com/b510/album/web/ProUploadServlet.java
复制代码 代码如下:
package com.b510.album.web;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import com.b510.album.exception.AlbumException;
import com.b510.album.web.base.BaseServlet;
/**
*
* @author Hongten
*
*/
@SuppressWarnings("unchecked")
public class ProUploadServlet extends BaseServlet {
private static final long serialVersionUID = 642229801989188793L;
public void service(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
Iterator iter = null;
String title = null;
response.setContentType("text/html;charset=GBK");
// 获取输出流
PrintWriter out = response.getWriter();
out.println("