首页 > 解决方案 > 如何通过 ajax 使用 Bootstrap4 自定义文件上传来上传文件

问题描述

我正在努力获取要上传的文件。我在这里检查了十几个样本(逐字复制代码),但没有任何效果。我没有错误,没有上传,我什么也没得到。

我在我的控制器中设置了一个断点,但它没有被击中。我所有的代码都在下面,我做错了什么

我正在使用 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" });
    }

标签: c#asp.net-core

解决方案


上传你的form标签需要的文件enctype="multipart/form-data"

尝试添加它,您应该会看到文件在后端通过。

并删除不需要的 javascript。


推荐阅读