最近部落客又去研究檔案上傳了
這次的檔案上傳是通過ajax上傳檔案。(看了下ajaxupfileload.js,主要是通過 iframe 送出的資料。)
需求就是在新增使用者的時候通過異步上傳表單和圖檔, 功能如圖所示:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIyVGduV2QvwVe0lmdhJ3ZvwFM38CXlZHbvN3cpR2Lc1TPB10QGtWUCpEMJ9CXsxWam9CXwADNvwVZ6l2c052bm9CXUJDT1wkNhVzLcRnbvZ2LcZXUYpVd1kmYr50MZV3YyI2cKJDT29GRjBjUIF2LcRHelR3LcJzLctmch1mclRXY39zN2YDOxkDM4ETMzMDM2EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
參考資料:
1.http://blog.csdn.net/zwx19921215/article/details/44133113
2.http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html
系列文章
1.http://cqjava.iteye.com/blog/2048233
2.http://cqjava.iteye.com/blog/2053119
3.http://cqjava.iteye.com/blog/2058912
最終曆經了千辛萬苦終于研究了出來,主要用到了 ajaxupfileload.js 插件。
ajaxupfileload.js 送出資料的時候需要以JSON格式送出表單資料,由于原生的 javaScript,Jquery 不支援将表單資料轉換成JSON格式的資料,部落客又用了另一個插件,将表單資料轉換為JSON格式進行送出。
ajaxupfileload.js 裡面需要用到 JQuery.handleError 函數,該函數在JQuery高版本中被移除了,我将其放到 ajaxupfileload.js,作為jquery的擴充函數
主要用到的插件下載下傳位址 http://pan.baidu.com/s/1slnAdMt
1.異步送出資料 ajaxupfileload.js
2.将表單轉換為JSON formToJson.js
主要步驟
1.将表單資料轉換為JSON格式
2.利用ajaxupfileload.js 将資料異步送出到伺服器上
3.背景接收資料并處理 參考文章 SpringMVC背景接收資料 http://blog.csdn.net/u010003835/article/details/51000077
前端js --- 通過js送出資料
ajaxupfileload + 表單轉JSON
/*添加或者更新結果*/
function saveOrUpdateForm(){
var checkImageFlag = checkImageFileType(); //校驗圖檔是否是正确的格式
var flag = $("#addOrUpdateModalForm").validationAjax(); //對表單資料的校驗
flag = checkImageFlag && flag;
//alert(flag);
if(flag){
var postUrl = appCtx+"userInfo/insertOrUpdate.do";
var params = $("#addOrUpdateModalForm").serializeJson(); //将表單資料轉換為JSON
//alert(params.name);
$("#loading").modal("show");
function ajaxFileUpload() {
$.ajaxFileUpload
(
{
url: postUrl, //用于檔案上傳的伺服器端請求位址
secureuri: false, //是否需要安全協定,一般設定為false
fileElementId: 'userImage', //檔案上傳域的ID
dataType: 'json', //傳回值類型 一般設定為json
data: params, //需要傳遞JSON對象如這種 {'name':'hahah'}
success: function (data, status) //伺服器成功響應處理函數
{
//alert('上傳成功');
},
error: function (data, status, e)//伺服器響應失敗處理函數
{
//alert(e);
doSuccess();
//成功後,模态框的狀态
successModalStatus(oneRowModalCloseBtn,oneRowModalSaveBtn,oneRowModalUpdateBtn,oneRowModal,oneRowModalTitle,oneRowModalBody);
//成功後,重新整理表單
succesListFormReflush();
}
}
)
return false;
}
ajaxFileUpload(); //将頭像和表單資料同時上傳
$("#loading").modal("hide");
}
}
由于需要上傳圖檔,前端對于圖檔的校驗:
/*校驗上傳檔案的資料類型,前端校驗,檢查檔案的檔案類型*/
function checkImageFileType(){
var correctType = new Array("png","jpeg","gif","jpg","bmp"); //正确的圖檔格式
var oldImageUrl = $("#imageUrl").get(0).value;
var fileName = $("#userImage").get(0).value;
//如果是之前有圖檔,現在不上傳新圖檔,不需要校驗
if((oldImageUrl!=null||oldImageUrl!="")&&(fileName==null||fileName=="")){
return true;
}
//對上傳的圖檔進行校驗
var fileType = fileName.substr(fileName.lastIndexOf(".")+1);
var fileTypeLow = fileType.toLowerCase(); //将圖檔格式的名字轉換為小寫
for(index in correctType){
if(fileTypeLow == correctType[index]){
//alert("正确的圖檔格式");
return true;
}
}
//錯誤資訊的提示
var infoParent = document.getElementById("checkImageInformation");
var tips = document.createElement("div");
tips.id = "checkImageTypeTips";
tips.style.width = "200px";
tips.style.color = "red";
tips.innerHTML = "資料類型不滿足要求,請上傳 png,jpeg,gif,jpg,bmp類型的圖檔";
infoParent.appendChild(tips);
return false;
}
前端頁面 + 背景接收部分, 寫的很爛,僅作為參考
前端頁面
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%-- <script type="text/javascript"
src="<%=request.getContextPath() %>/resources/js/jquery-1.4.4.min.js"></script> --%>
<!-- <script type="text/javascript">
$(function(){
$.ajax({
async: false,
type: "post",
url: appCtx+"userInfo/selectDepartmentTree.do",
success : function(data){
alert(data);
var msg = eval("("+data+")");
for(var i=0;i<msg.length;i++){
$("#departmentId").append("<option value="+msg[i].id+">"+msg[i].name+"</option>");
}
}
});
})
</script> -->
<form:form id="addOrUpdateModalForm" method="post" modelAttribute="userInfo" enctype="multipart/form-data">
<form:hidden path="userId" data-id="userId" />
<form:hidden path="imageUrl" data-id="imageUrl" />
<div class="content-modal" style="width:620px;">
<div style="width:309px;height:665px;border-right:1px solid #ccc;float:left;">
<h4 style="height:30px;line-height:30px;padding:0px;margin:0px;text-align:center;">上傳頭像</h4>
<p>
<label style="display:block;line-height:30px;">目前頭像:</label>
<br>
<%-- <c:if test=" ${empty userInfo.imageUrl} "> --%>
<c:if test="${not empty userInfo.imageUrl}">
<span style="width: 150px;height:150px;border:2px solid #ccc;display:inline-block;margin-left: 80px;overflow:hidden;">
<a>
<img src="<%=request.getContextPath()%>/resources/images/userImage/${userInfo.imageUrl}">
</a>
</span>
</c:if>
<c:if test="${empty userInfo.imageUrl}">
<span style="width: 150px;height:150px;border:2px solid #ccc;display:inline-block;margin-left: 80px;overflow:hidden;">
<a>
<img src="<%=request.getContextPath()%>/resources/images/unknownmale.jpg">
</a>
</span>
</c:if>
</p>
<input type="file" id="userImage" name="userImage" style="display:none;" οnchange="upfileName.value=this.value" accept="image/x-png,image/gif,image/jpeg,image/bmp"/>
<span style="height:50px;line-height:50px; /*清理浮動*/overflow:auto; zoom:1; ">
<input type="text" id="upfileName" readonly="readonly" style="float:left; width:220px;"/>
<input type="button" οnclick="userImage.click()" style="float:left; margin-left:5px; height:23px; width:57px; background: url(<%=request.getContextPath() %>/resources/images/sc.png) no-repeat;border:none;"/>
</span>
<div id="checkImageInformation"></div>
</div>
<div style="width:310px; float:left;">
<!-- <div class="input-append">
<input class="input-medium" id="citySel" readonly type="text" value="">
<a id="menuBtn" class="btn" type="button"><i class="icon-search"></i></a>
</div>
<div id="DropdownMenuBackground" style="display:none; position:absolute;z-index:999;height:300px; min-width:163px; background-color:white;border:1px solid;overflow-y:auto;overflow-x:auto;">
<ul id="dropdownMenu" class="tree"></ul>
</div> -->
<div class="row-modal">
<div class="control-group-modal">
<label class="control-label" for="organizationId">機構名稱:</label>
<div class="controls">
<c:if test="${role == 'sys' }">
<form:input disabled="true" data-id="organization" path="organizationId" cssClass="selectText" check-type="required" required-message="請選擇機構名稱!"/>
<%-- <form:select data-id="organization" path="organizationId" cssClass="selectText" οnchange="onchangeTree();" check-type="required" required-message="請選擇機構名稱!">
<form:option value="" >請選擇</form:option>
<c:forEach var="o" items="${organization }">
<form:option value="${o.organizationId }">${o.companyName }</form:option>
</c:forEach>
</form:select> --%>
<font class="red">*</font>
</c:if>
<c:if test="${role == 'org' }">
<div class="controls">
<form:input data-id="companyName" path="companyName" readonly="true" cssClass="inputText" style="color:#8C8C8C"/>
</div>
</c:if>
</div>
</div>
</div>
<div class="row-modal">
<div class="control-group-modal">
<label class="control-label" for="name">姓名:</label>
<div class="controls">
<form:input data-id="name" path="name" cssClass="inputText" check-type="required maxLength" max-length="10" required-message="請輸入員工姓名!" maxLength-message="員工姓名最多5個漢子!" />
<font class="red">*</font>
</div>
</div>
</div>
<div class="row-modal">
<div class="control-group-modal">
<label class="control-label" for="employNum">員工工号:</label>
<div class="controls">
<form:input data-id="employNum" path="employNum" cssClass="inputText" check-type="required number maxLength" max-length="10" number-message="員工工号為純數字!" required-message="員工工号不能為空!" maxLength-message="員工工号最多10位數字!" />
<font class="red">*</font>
</div>
</div>
</div>
<div class="row-modal">
<div class="control-group-modal">
<label class="control-label" for="sex">性别:</label>
<div class="controls">
<form:select data-id="userInfo" path="sex" cssClass="selectText">
<form:option value="">請選擇</form:option>
<form:option value="1">男</form:option>
<form:option value="2">女</form:option>
</form:select>
</div>
</div>
</div>
<div class="row-modal">
<div class="control-group-modal">
<label class="control-label" for="birthday">生日:</label>
<div class="controls">
<form:input data-id="birthday" path="birthday" οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd'})" cssClass="inputText"/>
</div>
</div>
</div>
<div class="row-modal">
<div class="control-group-modal">
<label class="control-label" for="card">身份證号:</label>
<div class="controls">
<form:input data-id="card" path="card" cssClass="inputText"/>
</div>
</div>
</div>
<div class="row-modal">
<div class="control-group-modal">
<label class="control-label" for="departmentId">所屬部門:</label>
<form:select data-id="departmentId" path="departmentId" cssClass="selectText" check-type="required" required-message="崗位不能為空!">
<form:option value="000" >請選擇</form:option>
<c:forEach items="${tree}" var="p">
<form:option value="${p.id }">${p.name}</form:option>
</c:forEach>
</form:select>
</div>
</div>
<div class="row-modal">
<div class="control-group-modal">
<label class="control-label" for="positionId">職務/崗位:</label>
<form:select data-id="position" path="positionId" cssClass="selectText" check-type="required" required-message="崗位不能為空!">
<form:option value="000" >請選擇</form:option>
<c:forEach var="p" items="${position }">
<form:option value="${p.positionId }">${p.positionName }</form:option>
</c:forEach>
</form:select>
</div>
</div>
<div class="row-modal">
<div class="control-group-modal">
<label class="control-label" for="iphone">手機号:</label>
<c:if test="${operation == 'add' }">
<div class="controls">
<form:input data-id="iphone" οnkeyup="checkLoginName(this.value)" path="iphone" cssClass="inputText" check-type="mobilePhone required number" />
<font color="red">*</font>
<span id="checkIphone"></span>
</div>
</c:if>
<c:if test="${operation == 'modify' }">
<div class="controls">
<form:input data-id="iphone" path="iphone" readonly="true" cssClass="inputText" style="color:#8C8C8C"/>
</div>
</c:if>
</div>
</div>
<div class="row-modal">
<div class="control-group-modal">
<label class="control-label" for="email">郵箱:</label>
<div class="controls">
<form:input data-id="email" path="email" cssClass="inputText" check-type="mail" mail-message="郵箱位址輸入有誤!" />
<br>
</div>
</div>
</div>
<div class="row-modal">
<div class="control-group-modal">
<label class="control-label" for="wechat">微信号:</label>
<div class="controls">
<form:input data-id="wechat" path="wechat" cssClass="inputText"/>
</div>
</div>
</div>
<div class="row-modal">
<div class="control-group-modal">
<label class="control-label" for="entryDate">入職時間:</label>
<div class="controls">
<form:input data-id="entryDate" path="entryDate" οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd'})" cssClass="inputText"/>
</div>
</div>
</div>
<div class="row-modal">
<div class="control-group-modal">
<label class="control-label" for="formalizationDate">轉正時間:</label>
<div class="controls">
<form:input data-id="formalizationDate" path="formalizationDate" οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd'})" cssClass="inputText"/>
</div>
</div>
</div>
<div class="row-modal">
<div class="control-group-modal">
<label class="control-label" for="cardNum">卡号:</label>
<div class="controls">
<form:input data-id="cardNum" path="cardNum" cssClass="inputText"/>
</div>
</div>
</div>
<div class="row-modal">
<div class="control-group-modal">
<label class="control-label" for="remarks">備注/情況:</label>
<div class="controls">
<form:textarea rows="5" maxlength="200" data-id="remarks" path="remarks" cssClass="textareaText" />
</div>
</div>
</div>
</div>
</div>
</form:form>
背景controller
/**
*
* @作者:szh
* @建立時間:2016年3月18日
* @方法功能:添加和修改
*/
@RequestMapping("insertOrUpdate")
@ResponseBody
public ActionResult insertOrUpdate(UserInfo userInfo, HttpSession session, HttpServletRequest request, HttpServletRequest response, @RequestParam(value="userImage",required=false)MultipartFile userImage) {
// 定義結果模态框
ActionResult result = new ActionResult();
try {
Object obj = session.getAttribute(ConstantAdmin.SESSION_ADMIN_INFO);
// 判斷userId 為null是 添加|不為null是修改
if (userInfo.getUserId() == null) {
if (obj instanceof UserOrganization) {
// 将session對象轉為organization類型
UserOrganization userOrg = (UserOrganization) obj;
// 給員工設定organizationId
userInfo.setOrganizationId(userOrg.getOrganizationId());
userInfo.setLastUpdateBy(userOrg.getCompanyName());
userInfo.setUserUuid(UUIDUtil.getUUID());
userInfo.setPassword("123456");
//使用者上傳頭像
String path = request.getSession().getServletContext().getRealPath("/resources/images/userImage"); //檔案在伺服器上存儲的位置
String originFileName = userImage.getOriginalFilename(); //擷取原始檔案的名字
//System.out.println(originFileName); //上傳檔案的名字
String type = originFileName.substring(originFileName.lastIndexOf(".")+1); //擷取檔案的類型,以最後一個"."辨別的檔案類型作為标準
//System.out.println(type);
String fileName = System.currentTimeMillis() + "." + type; //設定新檔案的名字
if((!(type==null)) && (!(type.equals("")))) //确實上傳了檔案
{
File targetFile = new File(path, fileName); //在指定路徑建立一個檔案
try {
userImage.transferTo(targetFile); //将檔案儲存到伺服器上指定的路徑上
userInfo.setImageUrl(fileName);
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
userInfoService.insertSelective(userInfo);
// 日志記錄
Logger logger = Logger.getLogger(this.getClass());
MDC.put("adminId", userOrg.getOrganizationId());
MDC.put("adminType", "2");
MDC.put("logType", TypeModel.LogType.LOG_SYS);
logger.info("企業管理者(" + ((UserOrganization) obj).getCompanyName() + ")新增員工資訊成功!");
} else if (obj instanceof SysUser) {
userInfo.setLastUpdateBy(((SysUser) obj).getLoginName());
userInfoService.insertSelective(userInfo);
}
// 使用者崗位中間表對象
UserPositionRel positionRel = new UserPositionRel();
// 設定userId
positionRel.setUserId(userInfo.getUserId());
// 查詢該user是否已存在崗位
List<HashMap<String, Object>> list = userPositionService.selectUserPositionRel(positionRel);
if (list.size() == 0) {
// 設定新崗位id
positionRel.setPositionId(userInfo.getPositionId());
// 未被配置設定崗位則直接進行配置設定(插入)
userPositionService.insertUserPositionRel(positionRel);
} else {
// 已被配置設定崗位則删除中間表中已有的崗位
userPositionService.deleteUserPositionRel(Integer.toString(userInfo.getUserId()));
// 設定新崗位id
positionRel.setPositionId(userInfo.getPositionId());
// 将新崗位插入中間表
userPositionService.insertUserPositionRel(positionRel);
}
result.setResult(OPERATOR_RESULT_SUCCESS_KEY);
result.setMessage(OPERATOR_RESULT_SUCCESS_ADD_VALUE);
// 更新
} else {
// 使用者和崗位中間表對象
UserPositionRel positionRel = new UserPositionRel();
// 設定userId
positionRel.setUserId(userInfo.getUserId());
// 查詢該使用者是否已被配置設定崗位
List<HashMap<String, Object>> list = userPositionService.selectUserPositionRel(positionRel);
// size==0 該角色未被配置設定崗位 反之已被配置設定崗位
if (list.size() == 0) {
// 設定新崗位id
positionRel.setPositionId(userInfo.getPositionId());
// 未被配置設定崗位則直接進行配置設定(插入)
userPositionService.insertUserPositionRel(positionRel);
} else {
// 已被配置設定崗位則删除中間表中已有的崗位
userPositionService.deleteUserPositionRel(Integer.toString(userInfo.getUserId()));
// 設定新崗位id
positionRel.setPositionId(userInfo.getPositionId());
// 将新崗位插入中間表
userPositionService.insertUserPositionRel(positionRel);
}
String path = request.getSession().getServletContext().getRealPath("/resources/images/userImage"); //檔案在伺服器上存儲的位置
//修改使用者上傳的頭像
//删除原有的頭像,需查詢原有圖檔名字
//使用者上傳頭像
UserInfo oldUserInfo = userInfoService.selectByPrimaryKey(String.valueOf(userInfo.getUserId()));
String oldImageUrl = oldUserInfo.getImageUrl();
//删除舊檔案
//如果與原來頭像是一個圖檔
String currentImageUrl = userInfo.getImageUrl();
if(currentImageUrl!=null && (!(oldImageUrl==null || oldImageUrl.equals(""))) && currentImageUrl.equals(oldImageUrl)){
//使用者沒上傳新圖像 不做任何操作
}
else{
//如果原頭像存在,則删除原頭像,有可能有備援資料
File oldFile = new File(path+File.separator+oldImageUrl);
if(oldFile.exists() && oldFile.isFile()){
oldFile.delete();
}
//存儲新上傳的頭像
String originFileName = userImage.getOriginalFilename(); //擷取原始檔案的名字
String type = originFileName.substring(originFileName.lastIndexOf(".")+1); //擷取檔案的類型,以最後一個"."辨別的檔案類型作為标準
String fileName = System.currentTimeMillis() + "." + type; //設定新檔案的名字
File targetFile = new File(path, fileName); //在指定路徑建立一個檔案
try {
userImage.transferTo(targetFile); //将檔案儲存到伺服器上指定的路徑上
userInfo.setImageUrl(fileName);
} catch (IllegalStateException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
if (obj instanceof UserOrganization) {
// 将session對象轉為organization類型
UserOrganization userOrg = (UserOrganization) obj;
userInfo.setLastUpdateBy(userOrg.getCompanyName());
userInfoService.updateByPrimaryKeySelective(userInfo);
// 日志記錄
Logger logger = Logger.getLogger(this.getClass());
MDC.put("adminId", userOrg.getOrganizationId());
MDC.put("adminType", "2");
MDC.put("logType", TypeModel.LogType.LOG_SYS);
logger.info("企業管理者(" + ((UserOrganization) obj).getCompanyName() + ")修改員工資訊成功!");
} else if (obj instanceof SysUser) {
userInfo.setLastUpdateBy(((SysUser) obj).getLoginName());
userInfoService.updateByPrimaryKeySelective(userInfo);
// 日志記錄
Logger logger = Logger.getLogger(this.getClass());
MDC.put("adminId", ((SysUser) obj).getId());
MDC.put("adminType", "1");
MDC.put("logType", TypeModel.LogType.LOG_SYS);
logger.info("背景管理者(" + ((SysUser) obj).getLoginName() + ")修改員工資訊成功!");
}
result.setResult(OPERATOR_RESULT_SUCCESS_KEY);
result.setMessage(OPERATOR_RESULT_SUCCESS_UPDATE_VALUE);
}
} catch (Exception e) {
e.printStackTrace();
result.setResult(OPERATOR_RESULT_ERROR_KEY);
result.setMessage(OPERATOR_RESULT_ERROR_VALUE);
}
// 傳回結果
return result;
}
插件的源碼
1.ajaxupfileload.js
jQuery.extend({
//擴充函數
handleError: function( s, xhr, status, e ){
// If a local callback was specified, fire it
if ( s.error ) {
s.error.call( s.context || s, xhr, status, e );
}
// Fire the global callback
if ( s.global ) {
(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
}
},
createUploadIframe: function(id, uri)
{
//create frame
var frameId = 'jUploadFrame' + id;
var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
if(window.ActiveXObject)
{
if(typeof uri== 'boolean'){
iframeHtml += ' src="' + 'javascript:false' + '"';
}
else if(typeof uri== 'string'){
iframeHtml += ' src="' + uri + '"';
}
}
iframeHtml += ' />';
jQuery(iframeHtml).appendTo(document.body);
return jQuery('#' + frameId).get(0);
},
createUploadForm: function(id, fileElementId, data)
{
//create form
var formId = 'jUploadForm' + id;
var fileId = 'jUploadFile' + id;
var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
if(data)
{
for(var i in data)
{
jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
}
}
var oldElement = jQuery('#' + fileElementId);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
//set attributes
jQuery(form).css('position', 'absolute');
jQuery(form).css('top', '-1200px');
jQuery(form).css('left', '-1200px');
jQuery(form).appendTo('body');
return form;
},
ajaxFileUpload: function(s) {
// TODO introduce global settings, allowing the client to modify them for all requests, not only timeout
s = jQuery.extend({}, jQuery.ajaxSettings, s);
var id = new Date().getTime();
var form = jQuery.createUploadForm(id, s.fileElementId, (typeof(s.data)=='undefined'?false:s.data));
var io = jQuery.createUploadIframe(id, s.secureuri);
var frameId = 'jUploadFrame' + id;
var formId = 'jUploadForm' + id;
// Watch for a new set of requests
if ( s.global && ! jQuery.active++ )
{
jQuery.event.trigger( "ajaxStart" );
}
var requestDone = false;
// Create the request object
var xml = {};
if ( s.global )
jQuery.event.trigger("ajaxSend", [xml, s]);
// Wait for a response to come back
var uploadCallback = function(isTimeout)
{
var io = document.getElementById(frameId);
try
{
if(io.contentWindow)
{
xml.responseText = io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
xml.responseXML = io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
}else if(io.contentDocument)
{
xml.responseText = io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
xml.responseXML = io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
}
}catch(e)
{
jQuery.handleError(s, xml, null, e);
}
if ( xml || isTimeout == "timeout")
{
requestDone = true;
var status;
try {
status = isTimeout != "timeout" ? "success" : "error";
// Make sure that the request was successful or notmodified
if ( status != "error" )
{
// process the data (runs the xml through httpData regardless of callback)
var data = jQuery.uploadHttpData( xml, s.dataType );
// If a local callback was specified, fire it and pass it the data
if ( s.success )
s.success( data, status );
// Fire the global callback
if( s.global )
jQuery.event.trigger( "ajaxSuccess", [xml, s] );
} else
jQuery.handleError(s, xml, status);
} catch(e)
{
status = "error";
jQuery.handleError(s, xml, status, e);
}
// The request was completed
if( s.global )
jQuery.event.trigger( "ajaxComplete", [xml, s] );
// Handle the global AJAX counter
if ( s.global && ! --jQuery.active )
jQuery.event.trigger( "ajaxStop" );
// Process result
if ( s.complete )
s.complete(xml, status);
jQuery(io).unbind();
setTimeout(function()
{ try
{
jQuery(io).remove();
jQuery(form).remove();
} catch(e)
{
jQuery.handleError(s, xml, null, e);
}
}, 100);
xml = null;
}
};
// Timeout checker
if ( s.timeout > 0 )
{
setTimeout(function(){
// Check to see if the request is still happening
if( !requestDone ) uploadCallback( "timeout" );
}, s.timeout);
}
try
{
var form = jQuery('#' + formId);
jQuery(form).attr('action', s.url);
jQuery(form).attr('method', 'POST');
jQuery(form).attr('target', frameId);
if(form.encoding)
{
jQuery(form).attr('encoding', 'multipart/form-data');
}
else
{
jQuery(form).attr('enctype', 'multipart/form-data');
}
jQuery(form).submit();
} catch(e)
{
jQuery.handleError(s, xml, null, e);
}
jQuery('#' + frameId).load(uploadCallback );
return {abort: function () {}};
},
uploadHttpData: function( r, type ) {
var data = !type;
data = type == "xml" || data ? r.responseXML : r.responseText;
// If the type is "script", eval it in global context
if ( type == "script" )
jQuery.globalEval( data );
// Get the JavaScript object, if JSON is used.
if ( type == "json" )
eval( "data = " + data );
// evaluate scripts within html
if ( type == "html" )
jQuery("<div>").html(data).evalScripts();
return data;
}
});
2.formToJson.js
$.fn.serializeJson=function(){
var serializeObj={};
var array=this.serializeArray();
var str=this.serialize();
$(array).each(function(){
if(serializeObj[this.name]){
if($.isArray(serializeObj[this.name])){
serializeObj[this.name].push(this.value);
}else{
serializeObj[this.name]=[serializeObj[this.name],this.value];
}
}else{
serializeObj[this.name]=this.value;
}
});
return serializeObj;
};