0

我开发了一个带有 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 上添加了一个演示。

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

4

3 回答 3

0

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

data-url="/"
于 2019-07-07T18:01:42.053 回答
0

检查与您的代码和以下步骤的差异:

  1. 创建 Asp.Net Core Razor Page 2.1 模板
  2. 将下面的代码添加到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>
    }
    
  3. 页面模型

    public class IndexModel : PageModel
    {
        public void OnGet()
        {
    
        }
        public void OnPost()
        {
            var files = HttpContext.Request.Form.Files;
        }
    }
    
于 2019-07-08T09:02:18.667 回答
0

我已经解决了这个问题。

第一:所有文件不能一起提交。对于每个文件,都会调用 post 方法。我的代码中有两个问题:提交按钮必须放置在带有 css 类“fileupload-buttonbar”的 div 标记中。

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

第二个问题是:我使用blueimp-framework的上传模板,不允许提交单个文件。所有文件只有一个提交按钮。所以我删除了上传模板中的开始按钮。这不起作用,因为 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找到

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

于 2019-08-09T07:33:10.377 回答