現(xiàn)今的主流瀏覽器由于ajax提交form表單無法把文件類型數(shù)據(jù)提交到后臺，供后臺處理，可是開發(fā)中由于某些原因又不得不用ajax提交文件，
為了解決這個(gè)問題我走了不少彎路：
1、用原生的 input file ， 不支持ajax上傳文件，你肯定會說可以用 ajax form表單上傳了呀？不過我后面還要調(diào)用上傳成功后用js處理一些對話框，所以這種方法排除
2、用了 uploadify 上傳插件，弄出來能上傳東西，結(jié)果不理想；因?yàn)椴荒芘袛嗌蟼鞯氖悄囊粡垐D片，需求得判斷每一張圖片，排除
3、最后選擇了jquery.form.min.js 這個(gè)上傳插件，至于怎么用網(wǎng)上有不少的教程了，我這里就列出我遇到的一些問題吧，供日后再次遇到能快速使用（忘記了可以快速找到）
下面說說 jquery.form.min.js 插件 它是一個(gè)優(yōu)秀的Ajax表單插件，我們可以非常容易的使用它處理表單控件的值，清空和復(fù)位表單控件，附件上傳，以及完成Ajax表單提交。jquery.form.min.js 有兩個(gè)核心方法ajaxForm()和ajaxSubmit()，由于我只用到了ajaxSubmit(),所以我只介紹下ajaxSubmit()的應(yīng)用。
利用ajaxSubmit()使得整個(gè)表單的ajax提交過程變得非常的簡單，所以我就說說我遇到的問題：
我用 jquery.form.min.js 遇到的幾個(gè)問題：
3.1 、 單擊提交按鈕是，對話框自動關(guān)閉問題（用jquery.form.min.js中的方法實(shí)現(xiàn)）
3.2 、 判斷input文件上傳類型問題（用input標(biāo)簽的 onchange事件判斷）
3.3 、 在IE 瀏覽器下 input file 清空問題（用js清空）
結(jié)合下面這些鏈接了解 jquery.form.min.js 的常用屬性
http://www.helloweba.com/view-blog-236.html
http://www.jb51.net/article/42271.htm
下面貼出上面三個(gè)問題的前端代碼：
問題3.1的答案
function showRequest(formData, jqForm, options) {//提交前完成，驗(yàn)證input file 中的文件 if(!true) { alert("密碼不能為空！") return false;//無法通過驗(yàn)證 } else
{ return true;//這樣就通過驗(yàn)證 }
問題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" onchange="pic1()"/> </td> </tr> <tr> <td> 圖片二 : <input id="pic2" name="pic2" onchange="pic2()" type="file" /> </td> </tr> <tr> <td> 圖片三: <input id="pic3" name="pic3" onchange="pic3()" type="file" /></td> </tr> </table> <input class="btn btn-primary" value="提交" type="submit" /> </form>
問題3.2答案 js 這里只給出一個(gè)input file 驗(yàn)證方法
//校驗(yàn)上傳文件是否為圖片格式 function pic1() { var strs = new Array(); //定義一數(shù)組 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下也能執(zhí)行成功
//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 自動關(guān)閉});
});
MVC中的action 獲取 文件的方法
HttpFileCollection files = System.Web.HttpContext.Current.Request.Files; if (files.Count<3)//這里是為了出現(xiàn)未知的錯(cuò)誤，所以只有上傳了三張圖片才執(zhí)行后面的代碼 { gm.id = 1; gm.message = "圖片沒上傳成功！"; return Json(gm); }執(zhí)行action方法成功后返回前端再次執(zhí)行的js方法
function showResponse(responseText, statusText) { if (responseText.id == 3) { alert("上傳成功"); $("#My_Dialog").modal('show');//走這么多彎路，為的就是這里，再次打開一個(gè)Dialog,所以沒選擇用form 的 action 上傳文件
}
else
{
alert(responseText.message);
}
下面給出 ajaxSubmit() 提供豐富的選項(xiàng)設(shè)置，我們根據(jù)使用的可能性大小進(jìn)行列表，以供參考。
| 屬性 | 描述 |
| url | Ajax請求將要提交到該url，默認(rèn)是表單的action屬性值 |
| type | 指定提交表單數(shù)據(jù)的方法（method）：“GET”或“POST”。默認(rèn)值：表單的method屬性值（如果沒有找到默認(rèn)為“GET”）。 |
| dataType | 期望返回的數(shù)據(jù)類型。null、“xml”、“script”或者“json”其中之一。dataType提供一種方法，它規(guī)定了怎樣處理服務(wù)器的響應(yīng)。這個(gè)被直接地反映到j(luò)Query.httpData方法中去。下面的值被支持： 'xml'：如果dataType == 'xml'，將把服務(wù)器響應(yīng)作為XML來對待。同時(shí)，如果“success”回調(diào)方法被指定， 將傳回responseXML值。 'json'：如果dataType == 'json'， 服務(wù)器響應(yīng)將被求值，并傳遞到“success”回調(diào)方法，如果它被指定的話。。 'script'：如果dataType == 'script'， 服務(wù)器響應(yīng)將求值成純文本。。 默認(rèn)值：null（服務(wù)器返回responseText值） |
| target | 指明頁面中由服務(wù)器響應(yīng)進(jìn)行更新的元素。元素的值可能被指定為一個(gè)jQuery選擇器字符串，一個(gè)jQuery對象，或者一個(gè)DOM元素。 默認(rèn)值：null。 |
| beforeSubmit | 表單提交前被調(diào)用的回調(diào)函數(shù)?！癰eforeSubmit”回調(diào)函數(shù)作為一個(gè)鉤子（hook），被提供來運(yùn)行預(yù)提交邏輯或者校驗(yàn)表單數(shù)據(jù)。如果“beforeSubmit”回調(diào)函數(shù)返回false，那么表單將不被提交?！癰eforeSubmit”回調(diào)函數(shù)帶三個(gè)調(diào)用參數(shù)：數(shù)組形式的表單數(shù)據(jù)，jQuery表單對象，以及傳入ajaxForm/ajaxSubmit中的Options對象。 默認(rèn)值：null |
| success | 表單成功提交后調(diào)用的回調(diào)函數(shù)。如果提供“success”回調(diào)函數(shù)，當(dāng)從服務(wù)器返回響應(yīng)后它被調(diào)用。然后由dataType選項(xiàng)值決定傳回responseText還是responseXML的值。 默認(rèn)值：null |
| clearForm | 表示如果表單提交成功是否清除表單數(shù)據(jù)。默認(rèn)值：null |
| resetForm | 表示如果表單提交成功是否進(jìn)行重置。默認(rèn)值: null |
jquery.form插件還提供了formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等方法。通常我們可以使用表單驗(yàn)證插件和jquery.form插件一起使用，效果更好。
下面給出一個(gè) 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" onclick="javascript:indexFunction();"/> </div><script type="text/javascript"> // 認(rèn)證必填框驗(yàn)證 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', '*'); } //清除并且關(guān)閉窗體 function clearfromCasePassdata() { // $("#index_form :input").not(":button, :submit, :reset, :hidden").val("").removeAttr("checked").remove("selected"); //核心 $("#index_Dialog").modal('hide'); } $(function () { //上傳文書附件管理 loadFun();//初始化插件 }) //關(guān)閉上傳圖片窗體 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', //隊(duì)列的ID 'queueSizeLimit': 999, //隊(duì)列最多可上傳文件數(shù)量，默認(rèn)為999 'auto': false, //選擇文件后是否自動上傳，默認(rèn)為true 'multi': false, //是否為多選，默認(rèn)為true 'removeCompleted': true, //是否完成后移除序列，默認(rèn)為true 'fileSizeLimit': '0MB', 'fileTypeDesc': "Image Files", //Files 標(biāo)識可以上傳任意文件 'fileTypeExts': '*.jpg;*.png;*.gif;*.jpeg;', //允許上傳的文件類型，限制彈出文件選擇框里能選擇的文件 'onQueueComplete': function (event, data) { //所有隊(duì)列完成 后事件 $('#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); } } }); }
轉(zhuǎn)載請注明出處http://www.cnblogs.com/izhiniao/p/4390168.html，謝謝！
聯(lián)系客服
