dwz 文件上传表单提交分析

众所周知，因为Ajax不支持enctype="multipart/form-data"。所以如果想采用无刷新的方式提交文件，Ajax是不行的。采用变通，也是最简单有效的方式是在页面中嵌入一个隐藏的iframe实现，将form的target属性指向这个iframe即可。dwz中也是使用这个方法。

首先，我们先来介绍下如何使用，然后再窥探下其内部实现。

<form method="post" action="content/fileManager.action?method=upload" enctype="multipart/form-data"  onsubmit="return iframeCallback(this);"><input name="file1" type="file"></form>

只需要设置 iframeCallback()函数即可，这个函数是dwz内置的函数，整个提交过程由它负责。它需要带有俩个参数：第一个参数为要提交的表单，一般为this即可，另一个是可选的参数callback，回调函数，负责处理表单返回值，如果不填默认调用dwz的ajaxDone（简单显示一些提示信息）方法。

而后台，在处理完上传的文件后，只需要返回一个json格式的字符串即可：

{
	"statusCode":"200",
	"message":"提交成功",
	"navTabId":"",
	"rel":"",
	"callbackType":"",
	"forwardUrl":"",
	"confirmMsg":""
}

使用很简单，下面我们就来分析下其内部执行过程，从iframeCallback函数开始：

源码：

/**
 * 带文件上传的ajax表单提交
 * @param {Object} form
 * @param {Object} callback
 */
function iframeCallback(form, callback){
	var $form = $(form), $iframe = $("#callbackframe");//获得要提交的表单及隐藏的iframe
	if(!$form.valid()) {return false;}//验证表单

	if ($iframe.size() == 0) {//判断这个隐藏的iframe是否存在，不存在则创建个
		$iframe = $("<iframe id='callbackframe' name='callbackframe' src='about:blank' style='display:none'></iframe>").appendTo("body");
	}
	if(!form.ajax) {
		$form.append('<input type="hidden" name="ajax" value="1" />');
	}
	form.target = "callbackframe";//关键一句，将form的target属性指向这个iframe
       _iframeResponse($iframe[0], callback || DWZ.ajaxDone);//提交表单，并处理返回值，如果callback方法未设置，则使用默认的DWZ的ajaxDone
}

主要完成3件事：

1. 创建并获得个iframe

2. 将form的target指向这个iframe

3. 设置回调函数callback

function _iframeResponse(iframe, callback){
	var $iframe = $(iframe), $document = $(document);
	
	$document.trigger("ajaxStart");
	
	$iframe.bind("load", function(event){//为iframe绑定load事件，该事件中将处理返回
		$iframe.unbind("load");
		$document.trigger("ajaxStop");
		
		if (iframe.src == "javascript:'%3Chtml%3E%3C/html%3E';" || // For Safari
			iframe.src == "javascript:'<html></html>';") { // For FF, IE
			return;
		}

		var doc = iframe.contentDocument || iframe.document;

		// fixing Opera 9.26,10.00
		if (doc.readyState && doc.readyState != 'complete') return; 
		// fixing Opera 9.64
		if (doc.body && doc.body.innerHTML == "false") return;
	   
		var response;
		
		if (doc.XMLDocument) {
			// response is a xml document Internet Explorer property
			response = doc.XMLDocument;
		} else if (doc.body){
			try{
				response = $iframe.contents().find("body").text();//获得body内的返回值，json格式，如下图
				response = jQuery.parseJSON(response);//转为json对象
			} catch (e){ // response is html document or plain text
				response = doc.body.innerHTML;
			}
		} else {
			// response is a xml document
			response = doc;
		}
		
		callback(response);//调用预先设置的回调 函数，默认是DWZ的ajaxDone函数 });
}

提交表单，并获得返回值，在将返回值传入callback并调用

返回值处理：

ajaxDone:function(json){
		if(json.statusCode == DWZ.statusCode.error) {
			if(json.message && alertMsg) alertMsg.error(json.message);
		} else if (json.statusCode == DWZ.statusCode.timeout) {
			if(alertMsg) alertMsg.error(json.message || DWZ.msg("sessionTimout"), {okCall:DWZ.loadLogin});
			else DWZ.loadLogin();
		} else {//提交成功
			if(json.message && alertMsg) alertMsg.correct(json.message);
		};
	}

根据返回状态statusCode的不同，进行不同提示。当然我们也可以定义自己的statusCode，再通过自定义的callback，在将这个callback传入iframeCallback函数即可。

下面来通过debug方式看看提交后的返回情况：

通过_iframeResponse方法内的如下俩句获得body内的返回值：

response = $iframe.contents().find("body").text();

response = jQuery.parseJSON(response);

dwz上手并不难，而对于有一定前端开发基础的理解起来也是很容易的。

+友情链接