现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台，供后台处理，可是开发中由于某些原因又不得不用ajax提交文件，
为了解决这个问题我走了不少弯路：
1、用原生的 input file ， 不支持ajax上传文件，你肯定会说可以用 ajax form表单上传了呀？不过我后面还要调用上传成功后用js处理一些对话框，所以这种方法排除
2、用了 uploadify 上传插件，弄出来能上传东西，结果不理想；因为不能判断上传的是哪一张图片，需求得判断每一张图片，排除
3、最后选择了jquery.form.min.js 这个上传插件，至于怎么用网上有不少的教程了，我这里就列出我遇到的一些问题吧，供日后再次遇到能快速使用（忘记了可以快速找到）
下面说说 jquery.form.min.js 插件 它是一个优秀的Ajax表单插件，我们可以非常容易的使用它处理表单控件的值，清空和复位表单控件，附件上传，以及完成Ajax表单提交。jquery.form.min.js 有两个核心方法ajaxForm()和ajaxSubmit()，由于我只用到了ajaxSubmit(),所以我只介绍下ajaxSubmit()的应用。
利用ajaxSubmit()使得整个表单的ajax提交过程变得非常的简单，所以我就说说我遇到的问题：
我用 jquery.form.min.js 遇到的几个问题：
3.1 、 单击提交按钮是，对话框自动关闭问题（用jquery.form.min.js中的方法实现）
3.2 、 判断input文件上传类型问题（用input标签的 onchange事件判断）
3.3 、 在IE 浏览器下 input file 清空问题（用js清空）
结合下面这些链接了解 jquery.form.min.js 的常用属性
http://www.helloweba.com/view-blog-236.html
http://www.jb51.net/article/42271.htm
下面贴出上面三个问题的前端代码：
问题3.1的答案
function showRequest(formData, jqForm, options) {//提交前完成，验证input file 中的文件if(!true){ alert("密码不能为空！")return false;//无法通过验证}else{return true;//这样就通过验证}
问题3.3的答案
html
<form id="index_form" name="index_form" role="form" method="post" class="form-horizontal" enctype="multipart/form-data"><table><tr> <td> 图片一 : <input id="pic1" name="pic1" type="file" οnchange="pic1()"/> </td> </tr><tr> <td> 图片二 : <input id="pic2" name="pic2" οnchange="pic2()" type="file" /> </td> </tr><tr> <td> 图片三: <input id="pic3" name="pic3" οnchange="pic3()" type="file" /></td> </tr> </table> <input class="btn btn-primary" value="提交" type="submit" /> </form>
问题3.2答案 js 这里只给出一个input file 验证方法
//校验上传文件是否为图片格式function pic1() {var strs = new Array(); //定义一数组var pic1= $("#pic1").val();strs = pic1.split('.');var suffix = strs [strs .length - 1];if (suffix != 'jpg' && suffix != 'gif' && suffix != 'jpeg' && suffix != 'png') {alert("你选择的不是图片,请选择图片！");var obj = document.getElementById('pic1');obj.outerHTML = obj.outerHTML; //这样清空，在IE8下也能执行成功//obj.select(); document.selection.clear(); 好像这种方法也可以清空 input file 的value值，不过我没测试}}
$(function(){ var options = { url:' .. .. ,, ',beforeSubmit: showRequest, //提交前处理 success: showResponse, //处理完成 resetForm: true, dataType: 'json' }; $('#index_form').submit(function() { //注意这里的index_form$(this).ajaxSubmit(options); return false;//防止dialog 自动关闭 });});
MVC中的action 获取 文件的方法
HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;if (files.Count<3)//这里是为了出现未知的错误，所以只有上传了三张图片才执行后面的代码{gm.id = 1;gm.message = "图片没上传成功！";return Json(gm);} 执行action方法成功后返回前端再次执行的js方法
function showResponse(responseText, statusText) {if (responseText.id == 3) {alert("上传成功"); $("#My_Dialog").modal('show');//走这么多弯路，为的就是这里，再次打开一个Dialog,所以没选择用form 的 action 上传文件}else {alert(responseText.message); }
下面给出 ajaxSubmit() 提供丰富的选项设置，我们根据使用的可能性大小进行列表，以供参考。
| 属性 | 描述 |
| url | Ajax请求将要提交到该url，默认是表单的action属性值 |
| type | 指定提交表单数据的方法（method）：“GET”或“POST”。默认值：表单的method属性值（如果没有找到默认为“GET”）。 |
| dataType | 期望返回的数据类型。null、“xml”、“script”或者“json”其中之一。dataType提供一种方法，它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持：'xml'：如果dataType == 'xml'，将把服务器响应作为XML来对待。同时，如果“success”回调方法被指定， 将传回responseXML值。'json'：如果dataType == 'json'， 服务器响应将被求值，并传递到“success”回调方法，如果它被指定的话。。'script'：如果dataType == 'script'， 服务器响应将求值成纯文本。。默认值：null（服务器返回responseText值） |
| target | 指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串，一个jQuery对象，或者一个DOM元素。默认值：null。 |
| beforeSubmit | 表单提交前被调用的回调函数。“beforeSubmit”回调函数作为一个钩子（hook），被提供来运行预提交逻辑或者校验表单数据。如果“beforeSubmit”回调函数返回false，那么表单将不被提交。“beforeSubmit”回调函数带三个调用参数：数组形式的表单数据，jQuery表单对象，以及传入ajaxForm/ajaxSubmit中的Options对象。默认值：null |
| success | 表单成功提交后调用的回调函数。如果提供“success”回调函数，当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。默认值：null |
| clearForm | 表示如果表单提交成功是否清除表单数据。默认值：null |
| resetForm | 表示如果表单提交成功是否进行重置。默认值: null |
jquery.form插件还提供了formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等方法。通常我们可以使用表单验证插件和jquery.form插件一起使用，效果更好。
下面给出一个 uploadify 示例代码，供日后参考：
<div id="index_Dialog" class="modal hide fade" tabindex="-1" role="dialog"aria-labelledby="myCaseLableJH" aria-hidden="true"><form id="index_form" name="indexUploadJH_form" role="form" method="post" class="form-horizontal" enctype="multipart/form-data"><b>请上传</b> <br />图片上传:<input id="uploadifyID" name="uploadifyID" type="file" multiple="multiple"/></form><input class="btn btn-primary" value="提交" type="button" οnclick="javascript:indexFunction();"/>
</div>
<script type="text/javascript">// 认证必填框验证function indexFunction() {if ($("#Pass").val() == "") {//密码不能为空$("Pass").siblings('.CasevalidText').text('密码不能为空').show();return;}var Count = $("#uploadifyID").data('uploadify').queueData.queueLength;if (lawyerCertificateJHCount <= 0) {alert("请上传文件");return;}$('#uploadifyID').uploadify('upload', '*');}//清除并且关闭窗体function clearfromCasePassdata() {// $("#index_form :input").not(":button, :submit, :reset, :hidden").val("").removeAttr("checked").remove("selected"); //核心$("#index_Dialog").modal('hide');}$(function () {//上传文书附件管理loadFun();//初始化插件})//关闭上传图片窗体function ClosePDFsee() {$("#index_Dialog").modal('hide');}function loadFun(){$('#uploadifyID').uploadify({'swf': '/Scripts/uploadify/uploadify.swf', //FLash文件路径'buttonText': '浏 览','width': 40, // 按钮的宽度'height': 15, //按钮文本'uploader': '/Home/getCasePassInfo', //处理文件上传Action'queueID': 'lawyerCasefileQueue', //队列的ID'queueSizeLimit': 999, //队列最多可上传文件数量，默认为999'auto': false, //选择文件后是否自动上传，默认为true'multi': false, //是否为多选，默认为true'removeCompleted': true, //是否完成后移除序列，默认为true'fileSizeLimit': '0MB','fileTypeDesc': "Image Files", //Files 标识可以上传任意文件'fileTypeExts': '*.jpg;*.png;*.gif;*.jpeg;', //允许上传的文件类型，限制弹出文件选择框里能选择的文件'onQueueComplete': function (event, data) { //所有队列完成 后事件$('#uploadifyID').uploadify('cancel', '*');},'onUploadStart': function (file) {$('#uploadifyID').uploadify("settings", 'formData', { 'Pass': $("#Pass").val(), Phone: $("#Phone").val(), no: $("#no").val(), name: $("#name").val(), fileIndex: file.index, filelength: $("#uploadifyID").data('uploadify').queueData.queueLength, intCount: file.index });},'onUploadError': function (event, queueId, fileObj, errorObj) {},'onUploadSuccess': function (file, data, respone) {data = JSON.parse(data);if (data.id == 2) {$("#index_Dialog").modal('hide');$('#IndexmediaForm').media({width: 500, height: 600,src: url});$("#newDialog").modal('show');}else {alert("上传失败，" + data.message);}}});} 原文地址：https://www.cnblogs.com/Leo_wl/p/4393190.html
