<%@ 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>
最近在項目中需要實現圖片的上傳，並且成功后返回圖片上傳保存路徑，通過查找資料探索研究，實現了項目功能需求，記在這方便自己以后查閱，也為有同樣需求的碼友分享，功能實現比較簡單，如果有好的建議和實現方法，還望多多指教。
主要將實現一下兩個功能：
1、使用commons-fileupload實現文件的上傳（包括圖片）；
2、使用jquery-form.js實現表單提交成功的回調函數。
頁面設計fileupload.jsp：
jquery.form.js 點擊下載