使用 jqgrid + jQuery Form Plugin 處理檔案上傳

最近在處理 jqgrid 的檔案上傳時，發現難度較大。

按其官方文檔上提示，應該在 onInitializeForm 這個 javascript 回呼函數中處理，官方文檔及論壇都沒有提供現成的例子。我們百試不通。

後按 google 上其他人的提示，在 beforeSubmit 這個 javascript 回呼函數中，攔截住 form 提交，手工使用 ajaxSubmit 提交 form, 並把原有的提交攔住。這才成功。

 

以下是部分代碼，供大家參考。

 

    do_before_submit = function(postdata, formid) {

        var options = {
                url: 'xxxxxx?grid_action=edit_page&oper=add&parent_uuid='+var_last_selected_parent_uuid,
                //dataType: 'json',
                timeout: 10000,
                iframe: true,
                type:'POST',
                forceSync:true,
                target: '#result_div',
                success:onSuccess  // post-submit callback,
               
            };

        //IE 8不認識 json 回應，讓它當普通 html 。否則上傳檔案後會出現下載頁面。
            jq.ajaxSetup({
                dataType: "html",
                type: "POST"
            });       
    formid.ajaxSubmit(options);//另外用 ajax form 外掛程式提交 form

 

//告訴 jqgrid 不要提交 form , 因為 jqgrid 不能正確處理 檔案上傳 form, 並且我們上面調用 ajaxSubmit 已經提交了 form

 return [false,"儲存成功"];

 

    }

 

var addOption =  {
        cache: false,
        contentType: "application/json; charset=utf-8",    
        reloadAfterSubmit:true,
        type: "POST",
        dataType: "json",
        afterSubmit: check_status_after_submit,
        beforeSubmit:do_before_submit,
        onInitializeForm:do_initialize_form
    };

    jq("#"+var_tbl_grid_id).navGrid('#'+var_div_grid_nav_id,
            gridNavOptions , //options
            editOption, // edit options
            addOption, // add options
            delOption, // del options
            searchOption // search options
        );

 

運行時，"儲存成功"幾個字被 jqgrid 當用戶端校正失敗資訊，用紅色提示。不過不影響使用者使用。

 

可能正確的辦法，還是用 onInitializeForm ，只不過我們找不到正解。這算是臨時解決辦法吧。