form表单中通常有其他的属性数据
form表单的提交数据的后台地址可能和上传文件的后台地址不一样
需要单独上传文件后,返回是否上传成功,再提交form表单的其他数据到后台
由上面几点插件的参数定义为:
var defOption = { url: "http://www.cnblogs.com/wangrudong003/", //上传路由地址,注:1.目前通过该地址上传文件成功后,返回的信息是text/plain 2.跨域暂未考虑
fileEleName: "fileName", //上传input file控件的唯一名称
uid: new Date().getTime(), //防重复
backFun: function () { } //回调函数
};
这个自定义插件原理和几个重点是:
自动创建一个iframe(用来做无刷新体验),iframe里面创建一个form表单,form表单里面只包含要上传的文件file对象,最终把iframe加入到视图页面中
通过iframe.load()方法来获取上传文件后返回到contentWindow.document.body中的信息,并且执行自定义回调函数,把参数传递给自定义方法方便使用者自由的控制体验效果
创建的form表单里面只能使用页面选择文件上传的文件file对象,使用jquery的clone()函数无法获取到选择的文件对象(这是一个悲剧),所以我这个使用append把用户使用的那个file对象直接包含到创建的form中去,然后在创建一个初始化的file元素对象到原始的视图中去代替被移除掉的file元素,代码如(这个还真花了我2个小时的时间尝试):
//清空自定义form多余的file元素
form.html("");
var files = $("input[name='" + defOption.fileEleName + "']");
//复制上传控件对象
var filesClone = files.clone(true);
filesClone.insertAfter(files);
form.append(files);使用该插件提交原始表单数据的顺序是:用户点击页面的保存按钮-》通过插件创建的上传文件的form表单,提交上传文件-》上传文件返回成功与否的信息-》收到上传成功新文件名称信息,创建个hidden保存新文件名称到原始form中去-》再真实提交原始form表单的其他数据
下面来看下效果图:

示例D的后台代码分为两部分:1.上传文件的Action 2.真实获取表单form参数的Action,代码如:
/// <summary>
/// 保存form提交的表单数据
/// </summary>
/// <returns></returns>
[HttpPost] public JsonResult D()
{
var response = new MoResponse();
var sbLog = new StringBuilder(string.Empty);
try
{
//访问上传文件地址
var path = @"http://localhost:1010/{0}";
sbLog.AppendFormat("账号:{0}<br/>", Request.Params["userName"]);










