这两天一直纠结着表单的问题。想在一个表单里实现三个功能：
- 输入查询条件，点击查询；
- 导出查询数据；
- 上传文件；
方法有很多，乱花渐欲迷人眼，尝试了很多，无果。大致说的是，给不同按钮写js代码，在js代码里设置url和get、post、multipart/form-data等属性。看到猎风的demo很不错：
1 14 15 1621
很清晰的代码!可惜我用不上。
后来终于做了一个艰难的决定——上传文件用一个form，另两个功能用一个form，总共两个form。
上传文件用MVC的html辅助方法吧：
@using (@Html.BeginForm("ImportExcel0", "BOM", FormMethod.Post, new { id = "UploadForm", enctype = "multipart/form-data" })) { } 哦，这个虽然可以上传文件，但是刷新页面会重复提交。好吧，用Ajax.BeginForm，这个是异步的应该不会导致重复提交。折腾许久发现这个Ajax.BeginForm根本不能上传文件！要异步上传文件，还得用jquery.form.js这个插件。http://malsup.com/jquery/form/
Let's go !
HTML:
1
Javascript:
1 $("#UploadForm").ajaxForm({ 2 iframe: true, 3 dataType: "json", 4 beforeSubmit: function () { 5 if ($('#FileUpload1').val() == '') { 6 alert('请选择文件!'); 7 return false; 8 } 9 },10 success: function (result) {11 $("#UploadForm").resetForm();12 var DialogVars = $.parseJSON(result);//响应信息13 if (result.success) {14 toastr.success(result.message, 'Success Message')15 alert(result.message);16 //导入成功后记录数没实时更新 17 $("#list").trigger("reloadGrid");18 }19 else {20 toastr.error(result.message, 'Error Message')21 alert(result.message);22 }23 },24 error: function (xhr, textStatus, errorThrown) {25 $("#UploadForm").resetForm();26 toastr.error('文档上传错误.', 'Error Message')27 }28 }); 这里有些东西后面介绍。
Controller:
public ActionResult ImportExcel0() { if (Request.Files["FileUpload1"] != null && Request.Files["FileUpload1"].ContentLength > 0) { string fileName = System.IO.Path.GetFileName(Request.Files["FileUpload1"].FileName); //string extension = System.IO.Path.GetExtension(fileName); string serverPath = string.Format("{0}/{1}", Server.MapPath("~/Content/UploadedFolder"), fileName); if (System.IO.File.Exists(serverPath)) System.IO.File.Delete(serverPath); Request.Files["FileUpload1"].SaveAs(serverPath); try { ImportExportData.ImportExcel(serverPath, "BOMs"); ViewBag.Msg = "good"; System.IO.File.Delete(serverPath); return Json(new { success = true, message = "导入成功！", fileName = fileName }); } catch (Exception ex) { ViewBag.Msg = ex.Message; System.IO.File.Delete(serverPath); return Json(new { success = false, message = "导入失败" + ex.Message, fileName = fileName }); } } return View("Index"); } 看起来还行，可以运行。但是问题接踵而来。
1、在IE8里点击上传文件后，文本框内容不消失，如果继续点击上传按钮，还会上传一次。
2、在IE8里上传成功后应该返回一个信息，这个信息是json格式的，但是IE8接收不到json格式的数据！实际情况是，当点击上传按钮后，本期望的弹出信息没看到反而出来一个下载提示：
再次向IE致敬！
寻寻觅觅，终于得知是ContentType问题，这个类型应该设置为text/html才行。这个是在服务端设置的，传给客户端后再转成json的格式来接收。
再看Controller里的action：
public ActionResult ImportExcel0() { if (Request.Files["FileUpload1"] != null && Request.Files["FileUpload1"].ContentLength > 0) { string fileName = System.IO.Path.GetFileName(Request.Files["FileUpload1"].FileName); //string extension = System.IO.Path.GetExtension(fileName); string serverPath = string.Format("{0}/{1}", Server.MapPath("~/Content/UploadedFolder"), fileName); if (System.IO.File.Exists(serverPath)) System.IO.File.Delete(serverPath); Request.Files["FileUpload1"].SaveAs(serverPath); try { ImportExportData.ImportExcel(serverPath, "BOMs"); ViewBag.Msg = "good"; System.IO.File.Delete(serverPath); //为避免IE8出现下载文件提示，需将ContentType设置为"text/html" JsonResult jt = Json(new { success = true, message = "导入成功！", fileName = fileName }); jt.ContentType = "text/html"; return jt; //增加以上3行代码。注释以下1行代码 //return Json(new { success = true, message = "导入成功！", fileName = fileName }); } catch (Exception ex) { ViewBag.Msg = ex.Message; System.IO.File.Delete(serverPath); JsonResult jt = Json(new { success = false, message = "导入失败" + ex.Message, fileName = fileName }); jt.ContentType = "text/html"; return jt; //return Json(new { success = false, message = "导入失败" + ex.Message, fileName = fileName }); } } return View("Index"); } 这样一来居然把上面出现的两个问题同时解决了！
本来对于清除input type=file的问题愁肠百转，找到一个方法看起来很厉害的样子：
//清除file文本框的内容 window.reset2 = function (e) { e.wrap(' 现在不用纠结了。
注：
javascript代码里有个toastr，这个是个信息提示插件，详情可见：http://kevintsengtw.blogspot.com/2013/03/aspnet-mvc-jquery-form-plugin.html#.UoYcWdLWamQ
一些链接：
http://blog.163.com/rihui_7/blog/static/212285143201361735143401/
http://www.oschina.net/question/223750_123703http://my.oschina.net/wangr15/blog/160054深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法http://www.itivy.com/jquery/archive/2011/7/6/jquery-get-post-getjson-ajax.html