Jquery div中的Dropzone而不是整个表单

我遵循本指南将dropzone集成到表单中并随附提交表单

然而，这就是我的结局

我的类别输入位于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>

@节脚本{
$（文档）.ready（函数（）{
$（文件）。关于（“提交”，即“表格”，职能（e）{
e、 预防默认值（）；
$.ajax({
url:“@url.Action”（“保存“，@ViewContext.RouteData.Values[“controller”].ToString（））”，
方法：“张贴”，
processData:false，
contentType:false，
成功：功能（结果）{
控制台日志（结果）；
}
});
返回false；
});
});
}
上传

@使用（Html.BeginForm（null，null，FormMethod.Post，new{@class=“dropzone”，enctype=“multipart/formdata”，id=“form”}））
{
@Html.AntiForgeryToken（）
@LabelFor（m=>m.Categories）
@Html.DropDownListFor（m=>m.Categories，（SelectList）Model.Categories，“，新{@class=“form control col-sm-12”}）
@Html.ValidationMessageFor（m=>m.Categories）

@ActionLink（“取消”、“索引”、@ViewContext.RouteData.Values[“controller”].ToString（）、new{}、new{@class=“btn btn outline secondary”}）
}
Dropzone.options.form={
自动处理队列：false，
uploadMultiple:true，
并行上传：100，
init：函数（）{
var myDropzone=this；
//首先更改按钮以实际通知Dropzone处理队列。
this.element.querySelector（“按钮[type=submit]”）。addEventListener（“单击”，函数（e）{
//确保表单没有实际发送。
e、 预防默认值（）；
e、 停止传播（）；
myDropzone.processQueue（）；
});
//收听sendingmultiple事件。在本例中，它是sendingmultiple事件
//因为uploadMultiple设置为true，所以发送事件的。
此.on（“sendingmultiple”，函数（）{
//在实际发送表单时触发。
//隐藏成功按钮或完整表单。
});
此.on（“successmultiple”，函数（文件、响应）{
//在成功发送文件时触发。
//重定向用户或通知成功。
});
此.on（“errormultiple”函数（文件、响应）{
//在发送文件时出错时触发。
//可能会再次显示表单，并通知用户错误
});
}
};

在代码中尝试以下更改

在所需列表中添加“id=“dropzonePreview””

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

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