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

Question

我遇到了麻烦。我需要将 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 帖子？

Answer 1

您是否尝试过使用 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 :(');
        }
});