ajax form表單提交 input file中的檔案

標籤：load   let   tpc   pdf   put   選項設定   error   檔案上傳   label   

 

現今的主流瀏覽器由於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" 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  這裡只給出一個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" onclick="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);                    }                }            });        }    

ajax form表單提交 input file中的檔案