使用ASPNET MVC 4，ajaxFileUpload和Webpi上傳帶有Jqgrid的文件

Question

我無法使用（ajaxFileUpload）進行上傳工作，但無法使其工作。我正在關注this post，但UploadImage函數未被調用。我的意思是，似乎在提交事件沒有被解僱之後。

任何想法爲什麼？

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加載。

在此先感謝！吉列爾莫。

Answer 1

我解決了它！ 我有兩個問題： 1）檢查瀏覽器中的開發人員工具我能夠看到有兩種可能的請求操作。我將文件上傳操作移至單獨的webapi控制器，並解決了該問題。 2）FileUpload col的名字沒有用，因爲我在下面使用fileUpload（不是大寫）。

謝謝！吉列爾莫。