Dropzone JS показывает область, но не работает - нет ошибки в журнале консоли - PullRequest
Новая
       14

Dropzone JS показывает область, но не работает - нет ошибки в журнале консоли

0 голосов
/ 27 февраля 2019

Я создал форму, которую я пытаюсь заставить работать, которая будет иметь зону dropzone - фактически, в идеале 2 и некоторые другие поля, и отправит все поля за один раз.Чтобы во время операции создания можно было назначить идентификатор и идентификаторы и правильно расположить файлы в структуре хранилища каталогов, используя этот идентификатор.

Код, который я получил, выглядит следующим образом.Я вижу область дропзоны, но не функциональность.Просмотр журнала консоли браузера не показывает ошибок или проблем.

Так что я не совсем понимаю, где искать.Как будто я удаляю все дропзоны, форма действительно работает. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>

<body>
<div class="container body-content">

<script src="/Scripts/dropzone/dropzone.js"></script>
<link href="/Scripts/dropzone/basic.css" rel="stylesheet" />
<link href="/Scripts/dropzone/dropzone.css" rel="stylesheet" />


<h2>ContactForm</h2>

<form id="my-awesome-dropzone"  method="POST" action="/Home/ContactForm" 
enctype="multipart/form-data" class="dropzone">    
<div class="form-horizontal">
    <h4>MemberModel</h4>
    <hr />

    <div class="form-group">
        <label class="control-label col-md-2" for="Name">Member Name</label>
        <div class="col-md-10">
            <input class="form-control text-box single-line" data-val="true" data-val-required="The Member Name field is required." id="Name" name="Name" type="text" value="" />
            <span class="field-validation-valid text-danger" data-valmsg-for="Name" data-valmsg-replace="true"></span>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-2" for="PhoneNumber">Telephone / Mobile Number</label>
        <div class="col-md-10">
            <input class="form-control text-box single-line" data-val="true" data-val-required="The Telephone / Mobile Number field is required." id="PhoneNumber" name="PhoneNumber" type="text" value="" />
            <span class="field-validation-valid text-danger" data-valmsg-for="PhoneNumber" data-valmsg-replace="true"></span>
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-10">
            <select id="TypeItem" name="TypeItem">
                <option selected="selected" value="AL">Alabama</option>
                <option value="AK">Alaska</option>
            </select>
        </div>
    </div>

    <div class="row form-group col-md-9 dropzone dropzone-previews" id="dropzone2">
        <h5>Other Files</h5>
        <hr />
        <div class="fallback">
            <input id="ImageFile" multiple="multiple" name="ImageFile" type="file" value="" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-md-2" for="ImagePath">Upload File</label>
        <div class="col-md-10">
            <input type="file" name="Otherfiles" multiple />
        </div>
    </div>

</div>
<button type="submit">Submit data and files!</button>
</form>

<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script>
    Dropzone.autoDiscover = false;


    // A $( document ).ready() block.
    //$(document).ready(function () {
    //    console.log("ready!");

        ``
        Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element

            // The configuration we've talked about above
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,
            url: "/Home/ContactForm",

            // The setting up of the dropzone
            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>
</body>
</html>
...