MVC6 - 使用Ajax将CSV文件和字符串上传到控制器

时间:2016-04-03 12:40:30

标签: jquery asp.net ajax

我遇到了麻烦。我需要将CSV文件和字符串变量的值一起发送回控制器。

我已经设法通过表单的提交按钮发送文件(只是通过提交),我也设法将字符串变量发送回控制器(使用ajax post),但当我将这些组合在一起时不工作。

我在这个论坛上搜索下载/上传文件(所有文件类型),但此时找不到我想要的内容。我最接近的是this

这是CSHTML表格:

<form asp-action="FileIndexView"
      asp-controller="SuburbsAndPostcodesAdmin"
      method="post"
      enctype="multipart/form-data">
    <div class="form-horizontal">
        <div class="form-group">
            <label class="col-md-4 control-label">Select the Suburbs and Postcodes latest CSV File:</label>
            <input type="file"
                   name="CSVFile"
                   id="txtFileUpload"
                   class="col-md-8 control-label" />
        </div>
        <div class="form-group">
            <input type="submit"
                   name="Submit"
                   value="Submit"
                   class="col-md-1 btn btn-primary"
                   disabled="disabled"
                   id="SubmitFile" />
        </div>
    </div>
</form>

这是javascript:

//On button click send the connection id back to method FileIndexView.
$('#SubmitFile').click(function (e) {
    e.preventDefault(); // <------------------ stop default behaviour of button

    var fileUpload = document.getElementById("txtFileUpload");
    var url = "/SuburbsAndPostcodesAdmin/FileIndexView";
    var connId = $.connection.hub.id;

    //$.post(url, {"fileUpload": file, "connId": connId });

    $.ajax({
        type: "POST",
        url: url,
        data: { file: file, "connId": connId },
        processData: false,
        contentType: false,
        success: function (result) {
            alert('Yay! It worked!');
        },
        error: function (result) {
            alert('Oh no :(');
        }
    });

});

这是控制器IActionResult:

[HttpPost]
public IActionResult FileIndexView(IFormFile file, string connId)
{
 ...stuff
}

它的MVC6所以我使用的是IFormFile。

我确实尝试将文件的id内容放入变量但它只是丢失了......你会注意到我也尝试过使用$ .post。如果我只发送字符串变量,我可以回到控制器。

我尝试发送文件的方式有什么问题,应该如何呈现,以便带有IFormFile参数和字符串参数的控制器接受Ajax帖子?

1 个答案:

答案 0 :(得分:0)

您是否尝试过使用FormData对象发布文件+字符串?

var fd = new FormData();    
fd.append( 'file', connId);
fd.append( 'connId', input.files[0] );

$.ajax({
        type: "POST",
        url: url,
        data: fd,
        processData: false,
        contentType: false,
        success: function (result) {
            alert('Yay! It worked!');
        },
        error: function (result) {
            alert('Oh no :(');
        }
});