最近在项目中需要实现图片的上传，并且成功后返回图片上传保存路径，通过查找资料探索研究，实现了项目功能需求，记在这方便自己以后查阅，也为有同样需求的码友分享，功能实现比较简单，如果有好的建议和实现方法，还望多多指教。
主要将实现一下两个功能：
1、使用commons-fileupload实现文件的上传（包括图片）；
2、使用jquery-form.js实现表单提交成功的回调函数。
页面设计fileupload.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文件上传</title>
<script src="static/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="static/js/jquery-form.js"></script>
<script type="text/javascript">
function subimtBtn() {
var form = $("form[name=fileForm]");
var options = {
url:'${pageContext.servletContext.contextPath}/servlet/imageUploadServlet',
type:'post',
success:function(data)
{
var jsondata = eval("("+data+")");
if(jsondata.error == "0"){
var url = jsondata.url;
alert(url)
$("#img").attr("src",url);
}else{
var message = jsondata.message;
alert(message);
}
}
};
form.ajaxSubmit(options);
//$("#fileForm").submit();
}
</script>
</head>
<body>
<div class="modal-body">
<form action='${pageContext.servletContext.contextPath}/servlet/imageUploadServlet' enctype="multipart/form-data" method="post" id="fileForm" name="fileForm">
<input type="file" name="filename">
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" onclick="subimtBtn();">提交</button>
</div>
<div>
<img alt="img" src="" id="img">
</div>
</body>
</html>
servlet实现：imageUploadServlet.java
package com.system.comtrol;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Arrays;
import java.util.Date;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONObject;
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;
/**
* Servlet implementation class ImageUploadServlet
*/
@WebServlet("/servlet/imageUploadServlet")
public class ImageUploadServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#service(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
PrintWriter out = response.getWriter();
// 文件保存目录路径
String savePath = request.getServletContext().getRealPath("/")+ "attached";
// 文件保存目录URL
String saveUrl = request.getContextPath() + "/attached";
// 定义允许上传的文件扩展名
HashMap<String, String> extMap = new HashMap<String, String>();
extMap.put("image", "gif,jpg,jpeg,png,bmp");
// 最大文件大小
long maxSize = 1000000;
response.setContentType("text/html; charset=UTF-8");
if (!ServletFileUpload.isMultipartContent(request)) {
out.println(getError("请选择文件。"));
return;
}
// 检查目录
File uploadDir = new File(savePath);
if (!uploadDir.isDirectory()) {
out.println(getError("上传目录不存在。"));
return;
}
// 检查目录写权限
if (!uploadDir.canWrite()) {
out.println(getError("上传目录没有写权限。"));
return;
}
String dirName = request.getParameter("dir");
if (dirName == null) {
dirName = "image";
}
if (!extMap.containsKey(dirName)) {
out.println(getError("目录名不正确。"));
return;
}
// 创建文件夹
savePath += dirName + "/";
saveUrl += dirName + "/";
File saveDirFile = new File(savePath);
if (!saveDirFile.exists()) {
saveDirFile.mkdirs();
}
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
String ymd = sdf.format(new Date());
savePath += ymd + "/";
saveUrl += ymd + "/";
File dirFile = new File(savePath);
if (!dirFile.exists()) {
dirFile.mkdirs();
}
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("UTF-8");
List items = upload.parseRequest(request);
Iterator itr = items.iterator();
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next();
String fileName = item.getName();
if (!item.isFormField()) {
// 检查文件大小
if (item.getSize() > maxSize) {
out.println(getError("上传文件大小超过限制。"));
return;
}
// 检查扩展名
String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
if (!Arrays.<String> asList(extMap.get(dirName).split(",")).contains(fileExt)) {
out.println(getError("上传文件扩展名是不允许的扩展名。\n只允许" + extMap.get(dirName) + "格式。"));
return;
}
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
try {
File uploadedFile = new File(savePath, newFileName);
item.write(uploadedFile);
} catch (Exception e) {
out.println(getError("上传文件失败。"));
return;
}
JSONObject obj = new JSONObject();
obj.put("error", 0);
obj.put("url", saveUrl + newFileName);
out.println(obj.toString());
}
}
} catch (FileUploadException e1) {
e1.printStackTrace();
}
}
private String getError(String message) {
JSONObject obj = new JSONObject();
obj.put("error", 1);
obj.put("message", message);
return obj.toString();
}
}
项目中依赖的主要jar：commons-fileupload-1.2.jar，commons-io-1.4.jar
主要的两个js文件：jquery.min.js，jquery-form.js
这些可以去网上下载，也可以在附件中下载。
分享到：
相关推荐
但是，用普通Form表单提交的话，没有办法实现回调函数。后来在小伙伴的介绍下，发现可以用ajaxSubmit()方法来实现此功能。 2. ajaxSubmit()方法简介 （1）ajaxSubmit()依赖 ajaxSubmit()方法是JQuery Form表单插件...
这是一款超简单的文件上传插件，html以表单提交的方式提交，按钮依旧是submit属性，然后选中该form表单，在submit方法里面写个function（）｛在这里调用该插件的ajaxSubmit方法即可成功提交，此时返回的数据是字符串...
基本原理就是在页面增加一个隐藏iframe，然后通过ajax提交除文件之外的表单数据，在表单数据提交成功之后的回调函数中，通过form单独提交文件，而这个提交文件的form的target就指向前述隐藏的iframe。 html 代码 ...
jQuery.form.js是一个form插件，支持ajax表单提交和ajax文件上传。 最近在使用jquery.form.js提交包含文件的表单时，碰到了一个问题：当碰上网速较慢时，而我们又设置了timeout时，例如： var options = { timeout:...
所以基本思路很简单，提交上传文件表单时，让浏览器转移到iframe处理响应信息，响应信息嵌入一段js代码，这段js代码调用当前页面的一个方法就可以实现回调，类似于xss攻击。 这时就要用到form表单的target属性，我们...
upload_success_handler : upload_success_function, 文件上传成功后触发的事件处理函数 upload_complete_handler : upload_complete_function, debug_handler : debug_function, custom_settings : { ...
onUpload：文件上传成功回调函数 参数值：成功后需要执行的函数 说明：这个函数执行时返回的值为上传程序返回的msg变量，可能为字符串或者数组，若为字符串则直接代表url，若是数组，则必需包含一个url的变量，其它...
脚本是基于JQuery，解决了异步提交表单和上传文件jquery-form.js, 解决file控件回调函数捕获时间节点的问题。
先说说常用的Form插件，支持Ajax，支持Ajax文件上传，功能强大，基本满足日常应用。 1、最新JQuery框架软件包下载 jquery.js压缩包 jquery.js非压缩包 2、Form插件下载 form.js 3、Form插件的简单入门 第一步：先...
1.9 不可不知的Callback回调 1.10 提高效率的链式（Chaining）操作 1.11 在新窗口中打开链接 1.12 强制在弹出窗口中打开链接 1.13 平滑滚动页面到某个锚点 1.14 阻止文本行换行 1.15 实现iframe高度自适应 1.16 实现...
7.5.6 通过回调函数执行正则表达式 7.5.6 的搜索和替换——preg_replace_ 7.5.6 callback 114 7.5.7 用正则表达式进行字符串分割 7.5.7 ——preg_split 115 7.6 字符操作的注意事项 117 7.7 小结 118 第8章 数组操作...
+为ExtAspNet.Alert.Show增加点击确定的JavaScript回调函数。 -一个典型应用，在Window控件中打开新页面，如果传递的参数不正确，则首先提示参数不对然后关闭此弹出窗口。 -ExtAspNet.Alert.Show("参数错误！",...
+为ExtAspNet.Alert.Show增加点击确定的JavaScript回调函数。 -一个典型应用，在Window控件中打开新页面，如果传递的参数不正确，则首先提示参数不对然后关闭此弹出窗口。 -ExtAspNet.Alert.Show("参数错误！",...
Asp.Net2.0无刷新客户端回调 体验.net 2.0 的优雅（1） -- 异步WebService调用 ASP.NET 2.0页面框架的几点新功能 ASP.NET 2.0 中收集的小功能点 asp.net2.0中的webpart使用小记 2.0问题、错误解决办法 ASP.NET 2.0...
2.2.1 将表单提交到另一个页面 2.2.2 使用Redirect( )方法 2.2.3 使用HyperLink控件 2.3 在控件上进行格式化 2.3.1 基本Web控件属性 2.3.2 在Web控件上应用样式 2.4 小结 <br>第3章...
2.2.1 将表单提交到另一个页面 2.2.2 使用Redirect( )方法 2.2.3 使用HyperLink控件 2.3 在控件上进行格式化 2.3.1 基本Web控件属性 2.3.2 在Web控件上应用样式 2.4 小结 <br>第3章...
2.2.1 将表单提交到另一个页面 2.2.2 使用Redirect( )方法 2.2.3 使用HyperLink控件 2.3 在控件上进行格式化 2.3.1 基本Web控件属性 2.3.2 在Web控件上应用样式 2.4 小结 <br>第3章...
2.2.1 将表单提交到另一个页面 2.2.2 使用Redirect( )方法 2.2.3 使用HyperLink控件 2.3 在控件上进行格式化 2.3.1 基本Web控件属性 2.3.2 在Web控件上应用样式 2.4 小结 <br>第3章...
2.2.1 将表单提交到另一个页面 2.2.2 使用Redirect( )方法 2.2.3 使用HyperLink控件 2.3 在控件上进行格式化 2.3.1 基本Web控件属性 2.3.2 在Web控件上应用样式 2.4 小结 <br>第3章...