html - Dropzone.js 无法映射到视图模型

Question

我有以下放置区 js，并有一个隐藏的文件输入，带有一个 asp-for 标签，它应该映射到我的视图模型。然而，没有任何东西被映射。控制器接受一个参数 List FormFiles。

  <form method="post" asp-action="Index" asp-controller="Customer" class="js-step-form js-validate" enctype="multipart/form-data"
                              data-hs-step-form-options='{
                                          "progressSelector": "#validationFormProgress",
                                          "stepsSelector": "#validationFormContent",
                                          "endSelector": "#validationFormFinishBtn",
                                          "isValidate": true
                                        }'>
                            <!-- Step -->
                            <!-- End Step -->
                            <!-- Content Step Form -->
                            <div id="validationFormContent">

                                <div id="validationFormAccount" class="active">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <!-- Form Group -->
                                            <div class="form-group js-form-message mb-3">
                                                <label class="input-label">Loyality Spend</label>
                                                <input id="LoyalitySpendTextBox" type="text" class="form-control stringValidation" required
                                                       data-msg="Please enter Loyality Spend." placeholder="Loyality Spend" aria-label="Current Value" value="@Model.Customer.LoyaltySpend" asp-for="@Model.Customer.LoyaltySpend">


                                            </div>
                                            <!-- End Form Group -->
                                        </div>
                                        <div class="col-sm-6">
                                            <!-- Form Group -->
                                            <div class="form-group mb-3">
                                                <label class="input-label">Documents</label>
                                                <!-- Dropzone -->
                                                <div id="attachFilesLabel" class="js-dropzone dropzone-custom custom-file-boxed">
                                                    <div class="dz-message dz-filename">
                                                        <img class="avatar avatar-xl avatar-4by3 mb-3" src="~/front-dashboard-v1.1/src/assets/svg/illustrations/browse.svg" alt="Image Description">
                                                        <h5>Drag and drop your file here</h5>
                                                        <p class="mb-2">or</p>
                                                        <span class="btn btn-sm btn-white" id="chose_files_btn" onclick="doOpen(event)">
                                                            Browse File
                                                            <input type="file" asp-for="@Model.FormFiles" id="File" name="File" size="1" style="display: none"  />
                                                        </span>
                                                    </div>
                                                </div>
                                                <!-- End Dropzone -->
                                            </div>
                                            <!-- End Form Group -->
                                        </div>
                                    </div>
                                </div>
  </form>                                                                       

标签： htmlasp.net-core

Answer 1

如果要绑定名称为FormFiles的数据，可以使用paramNameDropzone。如果要在按钮单击时上传文件，请尝试使用autoProcessQueue: false,，并在按钮单击事件中添加 e.preventDefault();wrapperThis.processQueue();。如果要删除文件，则需要添加addRemoveLinks: true,和使用removedfile. 这是一个演示。

看法：

<form  asp-action="Upload" asp-antiforgery="false"
  class="dropzone" id="myAwesomeDropzone" enctype="multipart/form-data">
<div class="fallback">
    <input asp-for="FormFiles" type="file" multiple />
    
</div>

js：

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/dropzone.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/dropzone.css"/>
    <script>
function myParamName() {
            return "FormFiles";
        }
        Dropzone.options.myAwesomeDropzone = {
        autoProcessQueue: false,
        paramName: myParamName, // The name that will be used to transfer the file
        uploadMultiple: true,
        parallelUploads: 100,
        addRemoveLinks: true, 
        removedfile: function (file) {
            file.previewElement.remove();
        },
        init: function () {
            console.log("active");
            var wrapperThis = this;

            $("#submit").click(function (e) {
                e.preventDefault();
                wrapperThis.processQueue();
            });
        },
        accept: function (file, done) {
            done();
        }
    };
    </script>

行动：

[HttpPost]
        public IActionResult Upload(List<IFormFile> FormFiles)
        {
            return Ok();
        }

结果：