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

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

尝试添加该文件，您应该会看到文件从后端通过。

并删除不需要的JavaScript。

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
        }

Answer 3

首先，在浏览器中按F12，以检查action（sUrl）是否正确，应该为action="/Admin/PerformImportUsers"。

然后将您的js更改为以下内容，以使用formdata上传文件。您需要使用importFile方法将formData的名称与参数名称（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>

如何使用Bootstrap4自定义文件通过Ajax上传文件

3 个答案: