在Web编程中，我们常常需要使用文件的上传功能。默认的普通文件上传功能是随form表单提交时执行上传的，表单提交的进程将伴随着文件上传进程。当需要上传的文件太大时，表单提交的时间将会大大增加，但是在表单提交期间我们又无法进行其他操作，因此异步文件上传就变成了Web编程中经常需要解决的问题。
下面介绍如何使用form结合ifame的方式实现简单的异步文件上传功能，其中关于HTML元素的操作使用了jQuery框架，当然有需要的也可以将这部分代码改写成标准DOM方式实现：
一、定义异步文件上传方法：
// 定义异步文件上传构造器
(function (window, jQuery, undefined) {
// 判断异步文件上传构造器是否已经定义
if (typeof (window.asyncUpload) == "function") {
return;
}
/**
* options：异步文件上传数据参数设置
*/
window.asyncUpload = function (options) {
if (!options) {
options = {};
}
// 构造隐藏的form和iframe
var name = new Date().getTime();
var iframeName = "iframe_" + name;
var formName = "form_" + name;
var $div = jQuery("<div style='display: none'></div>").appendTo("body");
var $iframe = jQuery("<iframe name='" + iframeName + "'></iframe>").appendTo($div);
var $form = jQuery("<form name='" + formName + "' method='post' enctype='multipart/form-data' encoding='multipart/form-data'></form>");
// 设置form提交到iframe中
$form.attr("target", iframeName).attr("action", options.url).appendTo($div);
// 剪切文件上传input到form中，并克隆新的文件上传input到原始位置
if (options.files) {
for (var key in options.files) {
var $file = jQuery(options.files[key]);
$file.clone(true).insertBefore($file);
$file.appendTo($form).removeAttr("id");
}
}
// 通过在form中创建隐藏的input来提交其他需要提交的数据
if (options.params) {
for (var key in options.params) {
jQuery("<input type='hidden' name='" + key + "' />").appendTo($form).val(options.params[key]);
}
}
// 绑定iframe的load事件
$iframe.load(function () {
// 触发上传完成响应事件
if (typeof (options.callback) == "function") {
var iframe = this;
// 定义上传结果对象
var data = {
responseText: "",
responseXML: ""
};
// 获取上传结果
if (iframe.contentWindow) {
data.responseText = iframe.contentWindow.document.body ? iframe.contentWindow.document.body.innerHTML : null;
data.responseXML = iframe.contentWindow.document.XMLDocument ? iframe.contentWindow.document.XMLDocument : iframe.contentWindow.document;
} else if (iframe.contentDocument) {
data.responseText = iframe.contentDocument.document.body ? iframe.contentDocument.document.body.innerHTML : null;
data.responseXML = iframe.contentDocument.document.XMLDocument ? iframe.contentDocument.document.XMLDocument : iframe.contentDocument.document;
}
// 根据数据类型构造上传完成响应事件参数
var args = null;
var dataType = jQuery.trim(options.dataType);
if (dataType == "json") {
// 将json字符串构造成JavaScript对象
eval("args = " + data.responseText + ";");
args = [args];
} else if (dataType == "xml") {
args = [data.responseXML];
} else {
args = [data.responseText, data.responseXML];
}
// 回调上传完成响应事件
options.callback.apply(iframe, args);
}
// 移除并释放临时数据
$div.remove();
});
// 提交表单
$form.submit();
};
})(window, jQuery);
二、参数说明：
该异步文件上传方法需要options对象参数，其中包括：
url：string，必填，上传提交地址
files：array，必填，上传的文件数组，支持DOM对象、jQuery对象、jQuery选择器
params：object，可选，其他需要提交的数据
dataType：string，可选，上传完成后响应的结果数据类型，可选值有xml、json、html，默认为html
callback：function，可选，上传完成后响应事件，事件参数为响应结果，参数类型以options.dataType定义为准
三、调用示例：
定义需要进行文件上传的input元素，该元素可以在HTML文档中body元素下任意位置：
<input id="file" name="file" type="file" />
在JavaScript中调用异步文件上传方法：
// 绑定文件上传input的change事件，使用户选择文件后自动触发上传
jQuery("#file").change(function () {
// 开始异步文件上传
asyncUpload({
// 上传提交地址
url: "upload.php",
// 上传的文件数组
files: [jQuery("#file")],
// 其他需要提交的数据
params: {
text: "file"
},
// 上传完成后响应的结果数据类型
dataType: "html",
// 上传完成后响应事件
callback: function (html, xml) {
alert(html);
}
});
});
上传文件提交地址的服务端可以使用基本的获取上传文件方法对上传上来的文件进行操作，最后返回相应的响应数据即可。