使用 jqgrid + jQuery Form Plugin 处理文件上传

来源：互联网发布：七喜cms 编辑：程序博客网时间：2024/04/28 13:40

最近在处理 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 ，只不过我们找不到正解。这算是临时解决办法吧。