Использование Dropzone внутри формы - PullRequest
Новая
       11

Использование Dropzone внутри формы

0 голосов
/ 15 мая 2018

Во-первых: это не дублирующий вопрос, так как я не нашел ни одного ответа, который бы там работал.

Я пытаюсь использовать Dropzonejs внутри формы, документация также не работает; все ответы там тоже не работают.

Мне нужен рабочий пример, так как я попробовал так много примеров и ответов, но безуспешно, чтобы заставить его работать.

Пожалуйста, сообщите. 

<form enctype="multipart/form-data" action="action" accept-charset="UTF-8" method="post" novalidate="novalidate" class="dropzone">
    <div class="row">
        <div class="col-xs-10">
        </div>
        <div class="col-xs-2" id="dropClickable">
            Drop Your File here...!!
        </div>
    </div>
</form>

<script>
    Dropzone.autoDiscover = false;
    jQuery(document).ready(function() {
        Dropzone.options.myAwesomeDropzone = {
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,
            init: function () {
                // Do your update and process stuff
            }
        }
    })
</script>

Также; попробовал этот пример, и ничего не получилось:

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

И вот что я получаю:

enter image description here

1 Ответ

0 голосов
/ 15 мая 2018

Похоже, что материал Dropzone выполняется до завершения загрузки браузера.

Оберните ваш javascript с помощью window.onload = function() { или $(function() { 

<script>     
$(function() {
    Dropzone.autoDiscover = false;
    jQuery(document).ready(function() {
        Dropzone.options.myAwesomeDropzone = {
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 100,
            maxFiles: 100,
            init: function () {
                // Do your update and process stuff
            }
        }
    })
})
</script>

С этими изменениями код теперь работаетмоя машина;используя jquery 3.3.1 и последнюю версию Dropzone

для вашего второго примера;Давайте откроем инструменты разработки (F12) и перейдем к отладке, мы увидим:
Error: No URL provided.
Нажатие на строку говорит нам, почему ... 

 if (_this.options.url == null) {
  _this.options.url = _this.element.getAttribute("action");
}

if (!_this.options.url) {
  throw new Error("No URL provided.");
}

Итак, если мы установим (в<form>) action= "test.php" страница теперь работает.

...