Использование Dropzone внутри формы
Во-первых, это не повторяющийся вопрос, так как я не нашел никакого ответа, который бы работал там.
Я пытаюсь использовать 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
И вот что я получаю:
Решение
Похоже, что материал 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" страница теперь работает.
Другие решения
Других решений пока нет …