已解决：blueimp / jQuery-File-Upload 不适用于 ASP.NET Core Razor Pages

Question

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

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

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

在我添加选项“'replaceFileInput: false'”后，通过按钮添加的文件已正确提交。

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

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

index.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 添加了演示。

（更新）我已经解决了这个问题。看我今天单独的post

Answer 1

您缺少表单的 data-url 属性，请将以下属性添加到表单。

data-url="/"

Answer 2

检查您的代码和以下步骤的区别：

创建 Asp.Net Core Razor Page 2.1 模板

将下面的代码添加到 Index.cshtml

<form id="fileupload" method="POST" 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="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{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.32.0/js/jquery.fileupload.js"></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: 100000000
            });
        });
    </script>
}

页面模型

public class IndexModel : PageModel
{
    public void OnGet()
    {

    }
    public void OnPost()
    {
        var files = HttpContext.Request.Form.Files;
    }
}

Answer 3

我已经解决了问题

第一：所有文件不能一起提交。对于每个文件，将调用 post 方法。我的代码有两个问题：提交按钮必须放置在带有 css-class "fileupload-buttonbar".

的 div 标签中

<div class="fileupload-buttonbar">
  <button type="submit" class="btn btn-primary start">
    <span>upload</span>
  </button>
</div>

第二个问题是：我用的是blueimp-framework的upload-template，不允许提交单个文件。所有文件只有一个提交按钮。所以我删除了上传模板中的开始按钮。这不起作用，因为 blueimp-framework 在内部使用了这个开始按钮。

解决方案是隐藏元素：

<td>
    {% if (!i && !o.options.autoUpload) { %}
      <button class="btn btn-primary start" disabled style="display: none">
        <span>Start</span>
      </button>
    {% } %}
    {% if (!i) { %}
    <button class="btn btn-warning upload-button cancel">
      <span>Cancel</span>
    </button>
    {% } %}
</td>

我的解决方案可以在 https://github.com/IsibisiCoder/Asp.Net-Core-with-blueimp-jQuery-File-Upload

找到

我在 asp.net 核心 2.2 mvc 找到了另一个解决方案 https://github.com/ronnieoverby/blue-imp-upload-aspnet-mvc

已解决：blueimp / jQuery-File-Upload 不适用于 ASP.NET Core Razor Pages

Solved: blueimp / jQuery-File-Upload doesn't work with ASP.NET Core Razor Pages

file-upload

blueimp

jquery-file-upload

jquery-upload-file-plugin

asp.net-core