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>

Answer 1

尝试在代码中进行以下更改

在需要的地方添加' id =“ dropzonePreview” '

public static Bitmap rotateBitmap(Bitmap bitmap, int orientation, Context context) {

        Matrix matrix = new Matrix();
        switch (orientation) {
            case ExifInterface.ORIENTATION_NORMAL:
                return bitmap;
            case ExifInterface.ORIENTATION_FLIP_HORIZONTAL:
                matrix.setScale(-1, 1);
                break;
            case ExifInterface.ORIENTATION_ROTATE_180:
                matrix.setRotate(180);
                break;
            case ExifInterface.ORIENTATION_FLIP_VERTICAL:
                matrix.setRotate(180);
                matrix.postScale(-1, 1);
                break;
            case ExifInterface.ORIENTATION_TRANSPOSE:
                matrix.setRotate(90);
                matrix.postScale(-1, 1);
                break;
            case ExifInterface.ORIENTATION_ROTATE_90:
                matrix.setRotate(90);
                break;
            case ExifInterface.ORIENTATION_TRANSVERSE:
                matrix.setRotate(-90);
                matrix.postScale(-1, 1);
                break;
            case ExifInterface.ORIENTATION_ROTATE_270:
                matrix.setRotate(-90);
                break;
            default:
                return bitmap;
        }
        try {
            Bitmap bmRotated = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth()/2, bitmap.getHeight()/2, matrix, true);
            bitmap.recycle();
            return bmRotated;
        }
        catch (OutOfMemoryError e) {
            e.printStackTrace();
            Toast.makeText(context, "Error:"  + e, Toast.LENGTH_SHORT).show();

            return null;
        }
    }

在如下脚本中添加“ previewpreviews容器：“＃dropzonePreview”，可点击：“＃dropzonePreview” ”

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