jquery的ajaxSubmit()非同步上傳圖片並儲存表單資料示範程式碼_jquery

(jsp需要引進 ：jquery-1.9.0.js、jquery.form.js ) ，jsp頁面使用的是bootstrap製作的，看不懂的標籤不用管，form表單大同小異。程式碼比較簡陋，只是為了示範使用ajaxSubmit異步上傳圖片及保存數據，請海含！
(參考文獻：http://www.jb51.net/shouce/jquery/jquery_api/Plugins/Form/ajaxSubmit.html)
一：web (add.jsp)

複製程式碼 程式碼如下:

pageEncoding="utf-8"%>















response.setCharacterEncoding("utf-8");//这个是设置编码方式
response.setContentType("text/html");//这个是设置网页类型，为文本代码
UserInformation user=null;
String username="";
Integer userId=null;
if(request.getSession().getAttribute("userinfo")!=null){
user=(UserInformation)request.getSession().getAttribute("userinfo");
username=user.getUsername();
userId=user.getUserId();
}else{
username="请登录";
}
%>

中文最大的购物经验分享平台

首页 |帮助

注册商圈

*商圈名：

*商圈logo：

*商圈英文名：

提交註冊;

表格>

© 2012 Fingerknow.com |隱私權條款|< ;/span>服務條款| ;粵ICP備12003619號-1

/**
*
* V1.0
*/
$(document).ready(function() {

//驗證商圈名
$(" #businessName").blur( function(){
varbusinessName=$("#businessName").val()
if(businessName!=""){
$("#businessName_error"). html("");
}else{
$("#businessName_error "). attr("class","error_div").html("" "商圈名不能為空！ ");
}

});
//驗證商圈英文名稱
$("#businessEname").blur(function(){
varbusinessEname=$( "#businessEname").val()
if(businessEname!=""){
$("#businessEname_error").html("");
}else{
$("#businessEname_error").attr("class", "error_div").html("" "商圈英文名稱不能為空！ );
//上傳圖片及資料儲存
$("#imgSave").click(function(){
var ext = '.jpg. jpeg.gif.bmp.png.';
var f=$("#file").val();
if (f== "") {//先判斷是否已選擇了檔案
$("#file_error").attr ("class","error_div").html("" "請新增商圈logo ！ .' f '.') == -1) {
$("#file_error").attr("class","error_div").html("" "圖片格式不正確！ >url: "${ctx}/upload/upload.do",
dataType: 'json',
contentType: "application/json ; charset=utf-8",
success: function(data ) {
// 'data' 是代表評估的json 資料的物件
//如果上傳圖片成功則儲存表單註冊資料
if(data.status=="0"){
var fileName=data.fileName;
//alert(檔名);
varbusinessName=$("#businessName").val();
var userId=$("#userId").val ();
varbusinessEname=$("#businessEname").val();
businessName=encodeURI(businessName);
businessName=encodeURI(businessName);
var urls="${xvar. }/business/addBusiness.do?businessName="businessName"&businessPic="fileName"&businessEname="businessEname"&userId="userId;
$.ajax({
type: "post",
url: urls ,
dataType: "json", /*這句話可用不用，沒有影響*/
contentType: "application/json; charset=utf-8",
成功: function (data) {
if(data.status=="0"){
alert("註冊成功!")
}else{
alert("註冊失敗！原因是："
}
},
錯誤: function (XMLHttpRequest, textStatus, errorThrown) {
alert (錯誤拋出);
}else{
$("# file_error").attr("class","error_div").html("" data .message);
}
}
};
// 提交表單
$('#uploadImgForm').ajaxSubmit(options);
});🎜>}; );
腳本>
身體>



二：service(FileUploadController.java ----springMVC之控制器層)




複製程式碼


程式碼如下：

@Controller
@RequestMapping(value = "/upload")
public class FileUploadController {
private Logger 記錄器;
@RequestMapping(value = "upload.do", method = RequestMethod.POST)
public void fileUpload(HttpServletRequest request, HttpServletResponse response) {
Map; resultMap = new HashMap();
String newRealFileName = null;
嘗試{
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
CommonsMultipartFile file = (CommonsMultipartFile) multipartRequest.getFile("file");
//取得檔案名稱：
String realFileName = file.getOriginalFilename();
if(file.getSize()/1024>=5*1024){
resultMap.put("status", 1);
resultMap.put("message", "圖片不能大於5M");
}else{
System.out.println("檔案取得名稱：" realFileName);
newRealFileName = FileUploadController.getNowTime() realFileName.substring(realFileName.indexOf("."));
// 取得路徑
String ctxPath = request.getSession().getServletContext().getRealPath("//") "//temp//";
//建立檔案
File dirPath = new File(ctxPath);
if (!dirPath.exists()) {
dirPath.mkdir();
}
檔案 uploadFile = new File(ctxPath newRealFileName);
FileCopyUtils.copy(file.getBytes(), uploadFile);
request.setAttribute("files", loadFiles(request));
resultMap.put("狀態", 0);
resultMap.put("fileName", newRealFileName);
}
} catch (例外 e) {
resultMap.put("status", 1);
resultMap.put("message", "圖片上傳錯誤");
logger.info("***** 圖片上傳錯誤 *****");
System.out.println(e);
} 最後 {
PrintWriter out = null;
嘗試{
out = response.getWriter();
} catch (IOException e) {
e.printStackTrace();
}
//必須設定字元編碼，否則回傳json會亂碼
response.setContentType("text/html;charset=UTF-8");
out.write(JSONSerializer.toJSON(resultMap).toString());
out.flush();
out.close();
}
}
}