Как правильно отправить файл на контроллер в MVC с помощью jQuery

Question

У меня есть представление, которое принимает файл следующим образом:

<form method="post" id="myform" enctype="multipart/form-data"
      asp-controller="UploadFiles" asp-action="Index">
    <div class="form-group">
        <div class="col-md-10">
            <p>Seleziona un file ORI ed un file MOD.</p>
            <label for="fileOri">Seleziona ORI</label>
            <input id="fileOri" type="file" name="fileOri" multiple />
            <p></p>
            <label for="fileMod">Seleziona MOD</label>
            <input id="fileMod" type="file" name="fileMod" multiple />
            <p></p>
            <input id="check" name="checkBoxCorreggi" type="checkbox" />
            <label for="check">Correggi Checksum</label>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-10">
            <p></p>
            <input type="button" id="VerificaChecksum" value="Verifica Checksum" onclick="fileUpload()" />
            <!--value= "Verifica Checksum-->
            <p></p>
        </div>
    </div>
</form>

и контроллер, подобный так:

public class UploadFilesController : Controller
{
    [HttpPost("UploadFiles")]
    public virtual string UploadFiles(object obj)
    {
        return "Just a test";
    }

}

То, чего я пытаюсь добиться - это передать файл от клиента к контроллеру, я много читал, но до сих пор ни один не работал вообще, это мой код JavaScript, который должен вызывать мой контроллер:

function fileUpload() {
    var fd = new FormData();
    var xhr = new XMLHttpRequest();
    var file = document.getElementById("fileOri").files[0];
    fd.append("file", file);
    xhr.open("POST", "/Home/Dll194/UploadFiles", true);
    xhr.send()

}

Но мои точки останова в VS2017 в коде контроллера не являются хитами, я что-то не так делаю? Может кто-нибудь прояснить процесс отправки файла на контроллер MVC? Я работаю с MVC и Netcore 2.1.

EDIT: Анализируя мой звонок в Fiddler, он говорит, что ответ на звонок был в порядке (200), поэтому я не понимаю, почему мои контрольные точки на контроллере не достигаются. Спасибо!

Answer 1

Вы можете использовать ajax для передачи в качестве форм-данных контроллеру.

JS:

@section Scripts{ 
<script>
function fileUpload() {
    var input = document.getElementById("fileOri");
    var files = input.files;
    var formData = new FormData();

    for (var i = 0; i != files.length; i++) {
        formData.append("files", files[i]);
    }

    $.ajax(
        {
            url: "/Home/Upload",
            data: formData,
            processData: false,
            contentType: false,
            type: "POST",
            success: function (data) {
                alert("Files Uploaded!");
            }
        }
    );
}
</script>
}

HomeController:

[HttpPost]
public async Task<IActionResult> Upload(IList<IFormFile> files)

Answer 2

Взгляните на этот вопрос .

В контроллере:

[HttpPost("UploadFiles")]
public virtual string UploadFiles()
{
    HttpRequest request = HttpContext.Current.Request;
    var files = request.Files;
    return "Just a test";
}

Answer 3

Поместите файл в тело запроса:

var file = document.getElementById("fileOri").files[0];
var req = new XMLHttpRequest();
req.open("POST", "/Home/Dll194/UploadFiles", true);
req.setRequestHeader("File-Name", file.name);
req.setRequestHeader("File-Size", file.size);
req.send(file);

Затем вы можете сохранить файл в ASP.NET Core:

[HttpPost("UploadFiles")]
public virtual string UploadFiles()
{
    using (FileStream stream = new FileStream(Request.Headers["File-Name"], FileMode.Create))
    {
        await Request.Body.CopyToAsync(stream);
    }
    return "File uploaded!";
}

Answer 4

Попробуйте отредактировать функцию с помощью следующего кода:

xhr.send(fd)