1

我无法使用（ajaxFileUpload）进行上传，但我无法使其正常工作。我正在关注这篇文章，但没有调用 UploadImage 函数。我的意思是，似乎 afterSubmit 事件没有被触发。

任何想法为什么？

jQuery("#ajaxGrid").jqGrid({
    url: $("#ServiceUrl").val(),
    datatype: "json",
    jsonReader: { repeatitems: false, id: "Id" },
    colNames: ['Id', 'logoTarjeta'],
    colModel: [
        { name: 'Id', index: 'id', editable: false, sortable: true, hidden: true, align: 'left' },
        {
            name: 'FileToUpload', index: 'logo', editable: true, edittype: 'file',
            editoptions: {
                enctype: "multipart/form-data"
            },
            width: 210, align: 'center', /*formatter: jgImageFormatter,*/ search: false
        }
    ],
    prmNames: { nd: null, search: null, page: "pageNumber", rows: "pageSize", sort: "sortColumn", order: "sortDirection" },
    mtype: 'GET',
    rowNum: 15,
    pager: '#ajaxGridPager',
    rowList: [10, 20, 50, 100],
    imgpath: $("#ServiceImagesUrl").val(),
    multiselect: false,
    scrollOffset: 0,
    afterSubmit: UploadImage,
    error: function (x, e) {
        alert(x.readyState + " " + x.status + " " + e.msg);
    }
});

function updateDialog(action) {
    return {
        url: $("#ServiceUrl").val(),
        closeAfterAdd: true,
        closeAfterEdit: true,
        afterShowForm: function (formId) { },
        modal: true,
        onclickSubmit: function (params) {
            var list = $("#ajaxGrid");
            var selectedRow = list.getGridParam("selrow");
            params.url += "/" + list.getRowData(selectedRow).Id;
            params.mtype = action;
        },
        width: "400",
        ajaxEditOptions: { contentType: "application/json" },
        serializeEditData: function (data) {
            delete data.oper;
            return JSON.stringify(data);
        }
    };
}

jQuery("#ajaxGrid").jqGrid(
    'navGrid',
    '#ajaxGridPager',
     {
         add: true,
         edit: true,
         del: true,
         search: false,
         refresh: false
     },
     updateDialog('PUT'),
     updateDialog('POST'),
     updateDialog('DELETE')
);

$(window).resize(resize_the_grid);

function resize_the_grid() {
    $('#ajaxGrid').fluidGrid({ base: '#grid_wrapper', offset: -20 });
}

function UploadImage(response, postdata) {
    debugger;
    var data = $.parseJSON(response.responseText);

    if (data.success == true) {
        if ($("#fileToUpload").val() != "") {
            ajaxFileUpload(data.id);
        }
    }
    return [data.success, data.message, data.id];
}

function ajaxFileUpload(id) {
    $("#loading")
    .ajaxStart(function () {
        $(this).show();
    })
    .ajaxComplete(function () {
        $(this).hide();
    });

    $.ajaxFileUpload(
        {
            url: $("#UploadImageUrl").val(),
            secureuri: false,
            fileElementId: 'fileToUpload',
            dataType: 'json',
            data: { id: id },
            success: function (data, status) {
                if (typeof (data.success) != 'undefined') {
                    if (data.success != true) {
                        return alert(data.message);
                    }
                    return true;
                } else {
                    return alert('Failed to upload logo!');
                }
            },
            error: function (data, status, e) {
                return alert('Failed to upload logo!');
            }
        }
    );
}

这是提交时调用的 webapi 服务

public HttpResponseMessage Put(Type type)
        {
            if (ModelState.IsValid)
            {
                Uow.Types.Update(type);
                Uow.Commit();
                var resp = new HttpResponseMessage
                {
                     Content = new StringContent("{\"success\":true,\"message\":\"\",\"new_id\":\"\"}")
                };
                resp.Content.Headers.ContentType = new MediaTypeHeaderValue("application/json");
                //resp.StatusCode = HttpStatusCode.NoContent;
                return resp; 
            }

            throw new HttpResponseException(HttpStatusCode.BadRequest);
        }

我看到网页中加载了插件 javascript。

提前致谢！吉列尔莫。

4

1 回答 1

0

我已经解决了！我遇到了两个问题：1）检查浏览器中的开发人员工具我能够看到请求有两种可能的操作。我将文件上传操作移至单独的 webapi 控制器，并解决了该问题。2) FileUpload col 的名称没有使用，因为我在下面使用 fileUpload（未大写）。

谢谢！吉列尔莫。

于 2013-01-25T02:28:50.547 回答