asp.net-core - 已解决：blueimp / jQuery-File-Upload 不适用于 ASP.NET Core Razor 页面

问题描述

我开发了一个带有 asp.net core 2.1 razor 页面的网站，用户可以在其中将多个媒体文件拖放到网站上，或者通过单击按钮将文件上传到服务器来选择文件。然后文件在页面上显示名称和其他属性。每个文件都有一个删除按钮来删除上传。

选择或删除所有文件后，用户按下提交按钮，所有文件将连同几个表单域一起提交到服务器。

现在的问题是，没有文件发送到服务器。用大拇指在网站上显示是正确的，但提交后 HttpContext.Request.Form.Files 为空。

添加选项'''replaceFileInput: false'''后，按钮添加的文件正确提交。

如果用户拖放文件，则文件不会添加到输入对象中。提交后，此文件未提交到服务器。

该网站的演示托管在 github 上： https ://github.com/IsibisiCoder/Asp.Net-Core-with-blueimp-jQuery-File-Upload

索引.cshtml：

<form id="fileupload" method="POST" data-url="Index" enctype="multipart/form-data">
<span class="btn btn-primary fileinput-button upload-button">
    <span>add files...</span>
    <input type="file" name="files" multiple>
</span>
<span class="fileupload-process"></span>

<!-- The table listing the files available for upload/download -->
<div id="upload-table-hide">
    <div id="upload-table table-wrapper">
        <div id="table-scroll">
            <table role="presentation" class="table table-striped"><tbody id="uploadedfiles" class="files"></tbody></table>
        </div>
    </div>
</div>
<div class="form-row">
    <div class="form-group col-sm-6">
        <input asp-for="Value1" class="form-control" placeholder="Parameter Formdata 1" />
        <span asp-validation-for="Value1" class="text-danger"></span>
    </div>
    <div class="form-group col-sm-6">
        <input asp-for="Value2" class="form-control" placeholder="Parameter Formdata 2" />
        <span asp-validation-for="Value2" class="text-danger"></span>
    </div>
</div>

<div class="form-row">
    <div class="col-sm-auto">
        <button id="upload-button" type="submit" class="btn btn-primary upload-button start">
            <span>upload</span>
        </button>
    </div>
</div>
</form>

@section Scripts{

<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade show">
    <td>
        <span class="preview"></span>
    </td>
    <td>
        <p class="name">{%=file.name%}</p>
        <strong class="error text-danger"></strong>
    </td>
    <td>
        <p class="size">Processing...</p>
    </td>
    <td>
        {% if (!i) { %}
        <button class="btn btn-warning upload-button cancel">
            <span>Löschen</span>
        </button>
        {% } %}
    </td>
</tr>
{% } %}
</script>

<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade show">
    <td>
        <span class="preview"></span>
    </td>
    <td>
        <p class="name">
            <span>{%=file.name%}</span>
        </p>
        {% if (file.error) { %}
        <div><span class="label label-danger">Error</span> {%=file.error%}</div>
        {% } %}
    </td>
    <td>
        <span class="size">{%=o.formatFileSize(file.size)%}</span>
    </td>
    <td>
        <p>&#9989;</p>
    </td>
</tr>
{% } %}
</script>

<script type="text/javascript">
    $(function (e, data) {
        'use strict';
        // Initialize the jQuery File Upload widget:
        $('#fileupload').fileupload({
            // Uncomment the following to send cross-domain cookies:
            //xhrFields: {withCredentials: true},
            previewMaxWidth: 100000,
            autoUpload: false,
            replaceFileInput: false,
            dataType: 'json',
            singleFileUploads: false,
            multipart: true,
            limitMultiFileUploadSize: 10000,
            paramName: 'files'
        });
    });
</script>
}

index.cshtml.cs

public class IndexModel : PageModel
{
    [BindProperty]
    public string Value1 { get; set; }

    [BindProperty]
    public string Value2 { get; set; }

    public void OnGet()
    {

    }

    [HttpPost]
    public IActionResult OnPost(List<IFormFile> files)
    {
        // with parameter or httpcontext or both
        var files2 = HttpContext.Request.Form.Files;
        return Page();
    }
}

我在https://github.com/ronnieoverby/blue-imp-upload-aspnet-mvc上找到了一个带有 asp.net mvc 的项目，它工作正常，request.files 已填满。但是对于 asp.net 核心，源代码不起作用。

（更新）我已经更改了描述并在 github 上添加了一个演示。

（更新）我已经解决了这个问题。请参阅我今天的单独帖子。

标签： asp.net-corefile-uploadjquery-file-uploadblueimpjquery-upload-file-plugin

asp.net-core - 已解决：blueimp / jQuery-File-Upload 不适用于 ASP.NET Core Razor 页面

问题描述

解决方案

推荐阅读