将ajax POST中的HttpPostedFileBase和其他变量传递给mvc控制器

时间:2017-07-27 06:16:40

标签: ajax asp.net-mvc

我一直在尝试使用ajax将文件和一些变量发布到我的控制器操作中,但我的两个变量都获得了null参数。 以下是我的ajax电话

   $("#btn-upload").on("click", function () {
               var rows =$("[name='rows']").val();
               var formData = new FormData($('#excel-upload-form')[0]);
               var Data = formData+"&rows="+rows;
               $.ajax({
                   url: '/MVC/UploadExcel/UploadExcel',
                   type: 'POST',
                   data: Data,
                   cache: false,
                   contentType: false,
                   processData: false,
                   success: function (result) {
                       if (result=='True') {
                           $(".alert-success").show(); 
                       }
                       else {
                           $(".alert-danger").show();
                       }
                   },
                   error: function (jqXHR, textStatus, errorThrown) {
                       $(".alert-danger").show();
                   },

               });
           });

我的控制器操作是

 [HttpPost]
        public bool UploadExcel(HttpPostedFileBase uploadedFile, int? rows)
        {
        var excelUtility = new ExcelUtilityService();
        bool success=false;
        if ((uploadedFile != null || uploadedFile.ContentLength > 0)&& rows !=null)
        {
        success = excelUtility.ProcessFile(uploadedFile, rows);
        }
        return success;
        }

如果我在我的ajax调用中只传递file参数它工作正常但是当我尝试使用多个参数(例如我的代码中的'rows')时,我的控制器操作中的两个参数都会在发布时变为空。

2 个答案:

答案 0 :(得分:3)

要向FormData对象添加值,您需要使用.append()

将脚本修改为

$("#btn-upload").on("click", function () 
   var rows =$("[name='rows']").val();
   var formData = new FormData($('#excel-upload-form')[0]);
   formData.append('rows', rows); // modify
   $.ajax({
       url: '/MVC/UploadExcel/UploadExcel',
       type: 'POST',
       data: formData, // modify
       cache: false,
       contentType: false,
       processData: false,
       success: function (result) {
           ....

答案 1 :(得分:0)

使用Stephen的脚本修改:

$("#btn-upload").on("click", function () 
   var rows =$("[name='rows']").val();
   var formData = new FormData($('#excel-upload-form')[0]);
   formData.append('rows', rows); // modify
   $.ajax({
       url: '/MVC/UploadExcel/UploadExcel',
       type: 'POST',
       data: formData, // modify
       cache: false,
       contentType: false,
       processData: false,
       success: function (result) {
           ....

如果直接链接到参数对上面的formData.append()方法不起作用,我建议通过以下方式访问它们:

Request["key-used-to-append"]

控制器示例(行变量分配):

[HttpPost]
    public bool UploadExcel(HttpPostedFileBase uploadedFile)
    {
    var excelUtility = new ExcelUtilityService();
    var rows = Request["rows"];
    bool success=false;
    if ((uploadedFile != null || uploadedFile.ContentLength > 0)&& rows !=null)
    {
    success = excelUtility.ProcessFile(uploadedFile, rows);
    }
    return success;
    }