jquery - div中的Dropzone而不是整个表单

Question

我正在按照本指南将 dropzone 集成到表单中并提交我的表单

https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone

然而，这就是我最终得到的

我的类别输入位于放置区域内部而不是外部。我的按钮也一样。如何让我的 dropzone 仅位于 div 中而不是占据整个表单？

这是我的 dropzone 配置和表单

@section scripts{
    <script>
        $(document).ready(function () {
           $(document).on("submit", "#form", function (e) {
                e.preventDefault();
                $.ajax({
                    url: "@Url.Action("Save", @ViewContext.RouteData.Values["controller"].ToString())",
                    method: "POST",
                    processData: false,
                    contentType: false,
                    success: function (result) {
                        console.log(result);
                    }
                });
                return false;
            });
        });
    </script>
}
<div class="col-sm-12">
    <h2>Upload</h2>
    <hr />
</div>
@using (Html.BeginForm(null, null, FormMethod.Post,new { @class = "dropzone", enctype = "multipart/form-data", id = "form" }))
{
    @Html.AntiForgeryToken()
    <div class="col-sm-12">
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    @Html.LabelFor(m => m.Categories)
                    @Html.DropDownListFor(m => m.Categories, (SelectList)Model.Categories, "", new { @class = "form-control col-sm-12" })
                    @Html.ValidationMessageFor(m => m.Categories)
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="dropzone-previews form-group">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <hr />
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <div class="clearfix">
                        <div class="pull-right">
                            <input type="submit" id="submit" value="Save" class="btn btn-primary" />
                            @Html.ActionLink("Cancel", "Index", @ViewContext.RouteData.Values["controller"].ToString(), new { }, new { @class = "btn btn-outline-secondary" })
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}
<script>
    Dropzone.options.form = {
        autoProcessQueue: false,
        uploadMultiple: true,
        parallelUploads: 100,
        init: function () {
            var myDropzone = this;

            // First change the button to actually tell Dropzone to process the queue.
            this.element.querySelector("button[type=submit]").addEventListener("click", function (e) {
                // Make sure that the form isn't actually being sent.
                e.preventDefault();
                e.stopPropagation();
                myDropzone.processQueue();
            });
            // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
            // of the sending event because uploadMultiple is set to true.
            this.on("sendingmultiple", function () {
                // Gets triggered when the form is actually being sent.
                // Hide the success button or the complete form.
            });
            this.on("successmultiple", function (files, response) {
                // Gets triggered when the files have successfully been sent.
                // Redirect user or notify of success.
            });
            this.on("errormultiple", function (files, response) {
                // Gets triggered when there was an error sending the files.
                // Maybe show form again, and notify user of error
            });
        }
    };
</script>

标签： jqueryasp.netasp.net-coredropzone.js

Answer 1

在您的代码中尝试以下更改

添加 ' id="dropzonePreview" ' 在你想要的

<div class="col-sm-12">
            <div class="dropzone-previews form-group" id="dropzonePreview">
            </div>
</div>

在脚本中添加' previewpreviewsContainer: "#dropzonePreview", clickable: "#dropzonePreview" '，如下所示

 Dropzone.options.form = {
        autoProcessQueue: false,
        uploadMultiple: true,
        parallelUploads: 100,
        previewpreviewsContainer: "#dropzonePreview",
        clickable: "#dropzonePreview",...}