Question

我需要从我的模态弹出窗口使用jquery上传文件。但是我在ajax调用期间将HttpPostedFileBase视为null。任何人都可以帮我解决这个问题。下面是jquery代码：

function uploadDocument(contactId, tripId, file) {
if ($('#documentUploadInput').val() == '') {
    alertify.error('Please select a file to upload');
    return;
}
$.ajax({
    url: '/CRMDomain/ContactDetail/UploadDocument',
    data: { contactId: contactId, tripId: tripId, file: file },
    type: 'POST',
    success: function () {
        alertify.success('Uploaded');
        $('#CRMUploadDocumentModal').modal('hide');
    },
    error: function () {
        alertify.error('Not Uploaded');
    }
});

}

这就是我调用jquery函数的方式：

<input id="btnSave" 
       type="button" 
       value="Upload" 
       class="btn btn-default"  onclick='uploadDocument($("#ContactId").val(), $("#tripId").val(), $("#documentUploadInput")[0].files[0]);' />

Answer 1

使用Ajax，您无法轻松发布文件。

我一直使用的最佳解决方案是使用jQuery Form Plugin，然后您应该将.ajax更改为.ajaxForm。

您可以查看this answer了解详情。

Answer 2

您必须使用FormData将多部分文件格式发送到控制器操作。

尝试使用以下ajax查询发布文件：

$.ajax({
    url: '/CRMDomain/ContactDetail/UploadDocument',
    data: { contactId: contactId, tripId: tripId, file: new FormData($("#documentUploadInput")[0].files[0]) },
    type: 'POST',
    contentType: false,
    processData: false,
    success: function () {
        alertify.success('Uploaded');
        $('#CRMUploadDocumentModal').modal('hide');
    },
    error: function () {
        alertify.error('Not Uploaded');
    }
});

您需要手动设置processData: false，否则jQuery会将您的文件转换为字符串。而且您还需要设置contentType: false，因为jQuery会在提交请求时覆盖您的内容类型。

也会在问题中发布您的控制器操作。

希望这有帮助。

Answer 3

$(function () {
$('#btnSave').click(function () {
  var fileUpload = $("#documentUploadInput").get(0);//Upload input box
  var file = fileUpload.files;
  var data= new FormData();

for (var i = 0; i < files.length; i++) {
  data.append('file', file[i]);
}
  data.contactId = $("#ContactId").val();
  data.tripId= $("#tripId").val();
$.ajax({
  url: "/CRMDomain/ContactDetail/UploadDocument",
  type: "POST",
  contentType: false,
  processData: false,
  data: data,
  success: function (result) {
     alert(result);
},
error: function (err) {
    alert(err.statusText);
 }
  });
 });
})

Answer 4

您需要更改一点代码。

var files = $('#documentUploadInput').get(0).files;
var data = new FormData();
if (files.length > 0) {
    data.append('file', files[0]);
}

$.ajax({
        url: '/CRMDomain/ContactDetail/UploadDocument',
        type: 'POST',
        data: data ,
        cache: false,
        contentType: false,
        processData: false,
        dataType: 'JSON',
        success: function (data) {
            alert(data)
        },
        error: function errorAlert(e, errorMsg) {
            alert("Your request was not successful: " + errorMsg);
       }
    });

在MVC中使用Jquery上传文件

4 个答案: