未从文件上传接收任何数据答案

【问题标题】：Not receiving any data from file upload未从文件上传接收任何数据
【发布时间】：2020-07-27 21:19:23
【问题描述】：

我正在尝试使用Krajee Bootstrap File Input 上传文件。我正在使用 ASP.NET Core 2。这是我的 HTML：

<input id="fileFileUpload" type="file" />

这是我的 javascript 代码：

    $("#fileFileUpload").fileinput({
        showPreview: true,
        uploadAsync: false,
        uploadUrl: '/fileupload'
    });

这是我的控制器代码：

[HttpPost]
public JsonResult Index(List<IFormFile> files)
{
    // Do stuff
}

我在我的控制器方法上设置了一个断点并且断点被命中。但是files 是空的。如何找回上传的文件？

【问题讨论】：

标签： c# file-upload asp.net-core asp.net-core-2.0 bootstrap-file-upload

【解决方案1】：

我可以看到该代码不起作用的第一个原因是您的输入未分配名称。

<input id="fileFileUpload" name="files" type="file" />

除此之外，您可以关注this MSDN 文章。

【讨论】：

是的，那是我的问题。我没有意识到输入元素上必须有 name 属性。一旦我添加了它，它就按预期工作了！谢谢！

【解决方案2】：

您可以从另一个按钮访问文件，然后像往常一样使用 ajax 发布它们。 ButtonFileUpload8 是新按钮的 ID，file-8 是文件上传控件的 ID。您必须禁用上传按钮

这不是完美的代码，我只是把它放在一起来展示它是如何完成的。

HTML：

    <form enctype="multipart/form-data">
        <div class="row mb-2">
            <div class="col-md-8">
                <div class="file-loading">
                    <input id="file-8" type="file" multiple>
                </div>
            </div>
        </div>
        <div class="btn-group btn-group-sm mr-1" role="group">
            <button id="ButtonFileUpload8" type="button" class="btn btn-sm">
                Blue
            </button>
        </div>

    </form>

Javascript（请注意，这会忽略发起程序中设置的帖子 URL，因此调用 FileUploadKrajee 并使用 ajax）：

    $("#file-8").fileinput({
        uploadUrl:"@Url.Action("FileUploadKrajee", "App")",
        uploadAsync: true,
        minFileCount: 1,
        maxFileCount: 5,
        overwriteInitial: false,
        initialPreview: "",
        initialPreviewConfig: "",
        uploadExtraData: "",
        showUpload: false
    });

    //  Click of upload button

    $("#ButtonFileUpload8").click(function () {
        var control = document.getElementById("file-8");
        var files = control.files;
        var formData = new FormData();

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

        $.ajax({
            url: 'UploadFiles3',
            type: "POST",
            contentType: false, // Do not set any content header
            processData: false, // Do not process data
            data: formData,
            async: false,
            success: function (result) {
                if (result != "") {
                    alert(result);
                }
                control.files.value("");
            },
            error: function (err) {
                alert(err.statusText);
            }
        });
    });

那么在接收控制器中就可以使用了：

    public ActionResult UploadFiles3(List<IFormFile> files)
    {
        string nams = "";
        string funame = "";

        foreach (IFormFile source in files)
        {
            string filename = ContentDispositionHeaderValue.Parse(source.ContentDisposition).FileName.ToString();

            filename = this.EnsureCorrectFilename(filename);

            nams = nams + source.FileName.ToString();

            funame = "D:\\Data\\PointsAlign\\Core\\" + filename;

            FileStream output = System.IO.File.Create(funame);

            source.CopyTo(output);
        }

        return Json("Hi, Alster. Your files uploaded successfully " + nams);

    }

这确实有效，但我还没有针对任何问题对其进行压力测试

【讨论】：