一. 开发运行平台
1. Eclipse JavaEE IDE Mars.2 Release(4.5.2)
二. 开发运行工具
1. JDK 1.7
2. Apache Tomcat 7.0
三. 涉及主要技术
1. JQuery 3.3.1
2. AJAX
2. Bootstrap 3.3.7
3. JAVAEE
4. Apache commons-fileupload
5. MySQL
6. Durid数据库连接池
四. 项目简介
1. 项目包括ImageUpload_001和ImageUpload_002两个子项目
2. ImageUpload_001项目前端通过同步方式表单提交,后台使用commons-fileupload组件实现图片上传,图片数据保存到MySQL数据库中
3. ImageUpload_002项目前端通过异步方式AJAX提交,后台使用commons-fileupload组件实现图片上传,图片数据保存到文件系统中,并将图片路径保存到MySQL数据库中
五. ImageUpload_001项目核心代码
1. MySQL数据库(image表)
CREATE TABLE `image` (
`image_name` VARCHAR (255) NOT NULL DEFAULT '',
`user_name` VARCHAR (255) DEFAULT '',
`image_type` VARCHAR (255) DEFAULT '',
`image_size` INT (10) DEFAULT '0',
`image_buf` LONGBLOB,
PRIMARY KEY (`image_name`)
) ENGINE = INNODB DEFAULT CHARSET = utf8;
2. pom.xml(项目依赖类)
com.alibaba
druid
1.1.9
mysql
mysql-connector-java
5.1.29
commons-fileupload
commons-fileupload
1.3.2
commons-io
commons-io
2.5
jstl
jstl
1.2
3. image_upload.jsp(图片上传页面)
用户名
图片上传
4. image-upload.js(上传图片校验)
// 图片上传参数
var defaults = {
// 图片上传类型
imageType : ["jpg", "png", "bmp", "jpeg"],
// 图片上传大小
imageSize : 1000 * 1024
};
// 图片上传校验
var validateImage = function(image) {
var suffix = image.name.split("").reverse().join("");
var type = suffix.split(".")[0].split("").reverse().join("");
// 判断图片类型
if ($.inArray(type, defaults.imageType) <= -1) {
alert("图片格式错误,请重新上传");
return false;
}
// 判断图片大小
if (image.size >= defaults.imageSize) {
alert("图片大小不能超过" + defaults.imageSize / 1024 + "KB,请重新上传");
return false;
}
return true;
};
5. ImageService.java
/**
* @Description 图片操作处理类
*/
public class ImageService {
/**
* @Fields imageDaoImp 图片操作实现类
*/
private ImageDao imageDaoImp = new ImageDaoImp();
/**
* @Fields userName 用户名
*/
private String userName;
/**
* @Fields imageList 图片列表
*/
private List imageList = null;
/**
* @Description 解析请求并上传图片
*/
public boolean parseRequest(HttpServletRequest request) throws IOException {
// 创建磁盘工厂
DiskFileItemFactory factory = new DiskFileItemFactory();
// 设置内存缓冲区
factory.setSizeThreshold(Integer.parseInt(Setting.getPropertie("upload.properties", "SIZETHRESHOLD")));
// 创建处理工具
ServletFileUpload upload = new ServletFileUpload(factory);
// 设置图片最大值
upload.setFileSizeMax(Long.parseLong(Setting.getPropertie("upload.properties", "FILESIZEMAX")));
// 设置请求编码
upload.setHeaderEncoding(Setting.getPropertie("upload.properties", "ENCODING"));
// 接收页面表单全部内容
List items = null;
try {
items = upload.parseRequest(request);
} catch (FileUploadException e) {
return false;
}
Iterator iter = items.iterator();
// 创建图片列表
imageList = new ArrayList();
// 遍历表单控件
while (iter.hasNext()) {
FileItem fileItem = iter.next();
// 获得普通表单控件
if (fileItem.isFormField()) {
// 获得用户名
if (fileItem.getFieldName().equals("userName")) {
userName = fileItem.getString((String) Setting.getPropertie("upload.properties", "ENCODING"));
}
} else {
// 创建图片对象
Image image = new Image();
DiskFileItem imageItem = (DiskFileItem) fileItem;
// 设置图片名
String imageName = Setting.getUUID() + "." + imageItem.getName().split("\\.")[1];
image.setImageName(imageName);
// 设置图片类型
image.setImageType(imageItem.getContentType());
// 设置图片大小
image.setImageSize(imageItem.getSize());
// 设置图片流
image.setImageBuf(imageItem.getInputStream());
// 添加图片对象
imageList.add(image);
// 删除内存中临时文件信息
imageItem.delete();
}
}
// 遍历图片上传
for (Image image : imageList) {
image.setUserName(userName);
try {
imageDaoImp.insertImage(image);
} catch (Exception e) {
return false;
}
}
return true;
}
/**
* @Description 响应结果
*/
public void responseResult(HttpServletRequest request, HttpServletResponse response, int responseType) throws IOException, ServletException {
RequestDispatcher rd = request.getRequestDispatcher("jsp/image_upload_result.jsp");
switch (responseType) {
case 1 :
request.setAttribute("responseType", 1);
break;
case 2 :
request.setAttribute("responseType", 2);
request.setAttribute("imageList", imageList);
break;
case 3 :
request.setAttribute("responseType", 3);
break;
}
rd.forward(request, response);
}
}
六. ImageUpload_002项目核心代码
1. MySQL数据库(image表)
CREATE TABLE `image` (
`image_name` VARCHAR (255) NOT NULL DEFAULT '',
`user_name` VARCHAR (255) DEFAULT '',
`image_type` VARCHAR (255) DEFAULT '',
`image_size` INT (10) DEFAULT '0',
`image_path` VARCHAR (255) DEFAULT '',
PRIMARY KEY (`image_name`)
) ENGINE = INNODB DEFAULT CHARSET = utf8;
2. pom.xml(项目依赖类)
com.alibaba
druid
1.1.9
mysql
mysql-connector-java
5.1.29
commons-fileupload
commons-fileupload
1.3.2
commons-io
commons-io
2.5
jstl
jstl
1.2
net.sf.json-lib
json-lib
2.4
jdk13
3. image_upload.jsp(图片上传页面)
用户名
图片上传
4. image-upload.js(上传图片校验)
// 图片上传参数
var defaults = {
// 图片添加最大个数
imageCount : 5,
// 图片上传类型
imageType : ["jpg", "png", "bmp", "jpeg"],
// 图片上传大小
imageSize : 1000 * 1024
};
// 图片校验
var validateImage = function(imageArr) {
var imageCheckedArr = new Array(0);
for (var i = 0; i < imageArr.length; i++) {
var suffix = imageArr[i].name.split("").reverse().join("");
var type = suffix.split(".")[0].split("").reverse().join("");
// 判断图片类型
if ($.inArray(type, defaults.imageType) <= -1) {
alert(imageArr[i].name + "图片格式错误,请重新上传");
continue;
}
// 判断图片大小
if (imageArr[i].size >= defaults.imageSize) {
alert(imageArr[i].name + "图片大小不能超过" + defaults.imageSize / 1024 + "KB,请重新上传");
continue;
}
imageCheckedArr.push(imageArr[i]);
}
return imageCheckedArr;
};
5. ImageService.java
/**
* @Description 图片操作处理类
*/
public class ImageService {
/**
* @Fields imageDaoImp 图片操作实现类
*/
private ImageDao imageDaoImp = new ImageDaoImp();
/**
* @Fields userName 用户名
*/
private String userName;
/**
* @Fields imageList 图片列表
*/
private List imageList = null;
/**
* @Description 解析请求并上传图片
*/
public boolean parseRequest(HttpServletRequest request) throws IOException {
// 创建磁盘工厂
DiskFileItemFactory factory = new DiskFileItemFactory();
// 设置内存缓冲区
factory.setSizeThreshold(Integer.parseInt(Setting.getPropertie("upload.properties", "SIZETHRESHOLD")));
// 设置图片上传文件夹
File imageUploadDir = new File(request.getServletContext().getRealPath("/") + "/imageUpload");
if (!imageUploadDir.exists()) {
imageUploadDir.mkdirs();
}
// 创建处理工具
ServletFileUpload upload = new ServletFileUpload(factory);
// 设置图片最大值
upload.setFileSizeMax(Long.parseLong(Setting.getPropertie("upload.properties", "FILESIZEMAX")));
// 设置请求编码
upload.setHeaderEncoding(Setting.getPropertie("upload.properties", "ENCODING"));
// 接收页面表单全部内容
List items = null;
try {
items = upload.parseRequest(request);
} catch (FileUploadException e) {
return false;
}
Iterator iter = items.iterator();
// 创建图片列表
imageList = new ArrayList();
// 遍历表单控件
while (iter.hasNext()) {
FileItem fileItem = iter.next();
// 获得普通表单控件
if (fileItem.isFormField()) {
// 获得用户名
if (fileItem.getFieldName().equals("userName")) {
userName = fileItem.getString((String) Setting.getPropertie("upload.properties", "ENCODING"));
}
} else {
// 创建图片对象
Image image = new Image();
DiskFileItem imageItem = (DiskFileItem) fileItem;
// 设置图片名
String imageName = Setting.getUUID() + "." + imageItem.getName().split("\\.")[1];
image.setImageName(imageName);
// 设置图片类型
image.setImageType(imageItem.getContentType());
// 设置图片大小
image.setImageSize(imageItem.getSize());
// 生成图片
InputStream is = imageItem.getInputStream();
File imageUpload = new File(imageUploadDir.getAbsolutePath() + "/" + imageName);
if (!imageUpload.exists()) {
imageUpload.createNewFile();
}
OutputStream os = new FileOutputStream(imageUpload);
int len = 0;
byte[] buf = new byte[1024];
while ((len = is.read(buf)) != -1) {
os.write(buf, 0, len);
}
os.close();
// 设置图片路径
image.setImagePath(imageUpload.getAbsolutePath());
// 添加图片对象
imageList.add(image);
// 删除内存中临时文件信息
imageItem.delete();
}
}
// 遍历图片上传
for (Image image : imageList) {
image.setUserName(userName);
try {
imageDaoImp.insertImage(image);
} catch (Exception e) {
return false;
}
}
return true;
}
/**
* @Description 响应结果
*/
public void responseResult(HttpServletRequest request, HttpServletResponse response, int responseType) throws IOException, ServletException {
JSONObject jsonObject = new JSONObject();
switch (responseType) {
case 1 :
jsonObject.put("responseType", 1);
break;
case 2 :
jsonObject.put("responseType", 2);
jsonObject.put("imageList", imageList);
break;
case 3 :
jsonObject.put("responseType", 3);
break;
}
PrintWriter pw = response.getWriter();
pw.write(jsonObject.toString());
pw.flush();
pw.close();
}
}
七. 项目源码
1. 码云:https://gitee.com/geniusWangJian/ImageUpload.git