Как загрузить файл с помощью пользовательской загрузки файла Bootstrap4 через ajax

Question

Я изо всех сил пытаюсь получить файл для загрузки. Я проверил дюжину примеров здесь (дословно скопированный код) и ничего не работает. Я не получаю ошибок, нет загрузки, я просто ничего не получаю.

Я установил точку останова в моем контроллере, но она не срабатывает. Весь мой код ниже, что я делаю не так

Я использую asp.net.core 2.2 и VS2019

HTML

<div class="card">
    <div class="card-header">
        <div class="row">
            <div class="col">
                <h4>Import Users</h4>
            </div>
            <div class="col">
                <form id="frmUpload" action="@Url.Action("PerformImportUsers","Admin")" method="post">
                    @Html.AntiForgeryToken()
                    <div class="input-group">
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" name="importFile" id="inputGroupFile02">
                            <label class="custom-file-label" for="inputGroupFile02" style="overflow:hidden;">Choose file</label>
                        </div>
                        <div class="input-group-append">
                            <a href="" class="input-group-text btn btn-primary" id="uploadFile"><span class="fa fa-upload"></span></a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

JS

<script>
    $("#uploadFile").on("click", function (e) {
        e.preventDefault();
        //e.stopPropagation();

        debugger;
        var myForm = $("#frmUpload");
        var sUrl = myForm.attr("action");

        var files = $("#inputGroupFile02").get(0);
        var formData = new FormData();

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

        $.ajax({
            type: "POST",
            url: sUrl,            
            contentType: false,
            processData: false,
            data: formData,
            success: function (result) {    
                var data = jQuery.parseJSON(result);
                showNotify(data.message);
            },
            error: function () {
                alert("there was an error");
            }
        });
    });
</script>

КОНТРОЛЛЕР

    [HttpPost]
    //[ValidateAntiForgeryToken]
    public JsonResult PerformImportUsers(List<IFormFile> importFile)
    {
        return new JsonResult(new { result = "success", message = "Uploaded" });
    }

Answer 1

Прежде всего, нажмите F12 в браузере, чтобы убедиться, что action (sUrl) является правильным или нет, оно должно быть action="/Admin/PerformImportUsers".

Затем измените ваши js на ниже, чтобы загружать файлы с использованием formdata. Вам необходимо сопоставить имя formData с именем параметра (importFile) в методе POST.

<script>
    $("#uploadFile").on("click", function (e) {
        e.preventDefault();

        var myForm = $("#frmUpload");
        var sUrl = myForm.attr("action");

        var input = document.getElementById("inputGroupFile02");
        var files = input.files;
        var formData = new FormData();

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


        $.ajax({
            type: "POST",
            url: sUrl,
            contentType: false,
            processData: false,
            data: formData,
            success: function (result) {
                var data = jQuery.parseJSON(result);
                showNotify(data.message);
            },
            error: function () {
                alert("there was an error");
            }
        });
    });
</script>

Answer 2

    [HttpPost]
        //[ValidateAntiForgeryToken]
        public JsonResult PerformImportUsers() // remove parameter
        {
             var files = this.Request.Form.Files; //retreive files
            return new JsonResult(new { result = "success", message = "Uploaded" });
        }

Помимо этого кода ниже будет добавлен только 1 файл

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