Почему моя форма Dropzone javascript не работает?
помогите!
Я создаю переднюю часть веб-сайта, и я использую dropzone.js для загрузки изображений. Теперь я включил dropzone.минута.js и dropzone.css в голове, и я назначил класс dropzone тегу, который я хотел преобразовать. Несмотря на это, поле формы не превращается в поле dropzone. Удаление изображений на поле приводит к тому, что в браузере отображается только изображение, как это обычно делается. Я использую много разных плагинов jQuery или javascript, поэтому, возможно, есть что-то вызывает конфликт?
Firebug console говорит: Ошибка Uncaught: нет URL-адреса.
если бы вы, ребята, могли помочь мне в этом, было бы здорово! Заранее спасибо
вот полный HTML код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Dropzone -->
<link rel="stylesheet" media="screen" type="text/css" href="css/dropzone.css" />
<script type="text/javascript" src="dropzone.min.js"></script>
<!-- Color picker -->
<link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" />
<script type="text/javascript" src="js/colorpicker.js"></script>
<script type="text/javascript" src="js/eye.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/layout.js?ver=1.0.2"></script>
<!-- CHOSEN Custom fields -->
<link rel="stylesheet" type="text/css" href="css/chosen.css" />
<!-- Base includes -->
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<!-- Pop up window -->
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script type="text/javascript" src="js/editstyle.js"></script>
<script type="text/javascript" src="js/jquery.sortable.min.js"></script>
<title>AppXelerator</title>
</head>
<body>
<div class="container" id="fullscreen">
<p>
<img class="logo" src="images/logo.png" alt="AppXelerator logo"/>
</p>
<div class="mainnavwrap">
<ul class="mainnav whiteblock">
<li><a href="#"><img src="images/menu_apps.png" alt="apps icon"/> Apps</a></li>
<li><a href="#"><img src="images/menu_crawler.png" alt="crawler icon"/>Crawler</a></li>
<li class="active"><a href="#"><img src="images/menu_builder.png" alt="builder icon"/>Builder</a></li>
<li><a href="#"><img src="images/menu_publish.png" alt="publish icon"/>Publish</a></li>
<li><a href="#"><img src="images/menu_finish.png" alt="finish icon"/>Finish</a></li>
</ul>
</div>
<div class="pageswrap">
<h2>Pages</h2>
<button class="md-trigger bluebutton" data-modal="modal-9">+ Add new page</button>
<ul class="pages whiteblock">
<li class="disabled">Home (locked)</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Shop</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Saved products</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>About us</li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Store locator</li>
</ul>
</div>
<div class="content whiteblock">
<div class="contenthead">
<div class="page_details">
<!--<a href="#"><img src="images/menu_apps.png"></a>-->
<h2><a href="#">Home</a></h2>
<button class="md-close"><img src="images/icon_remove.png"/>Remove page</button>
</div>
<ul>
<li class="active"><a href="#">Content</a></li>
<li><a href="#">Design</a></li>
</ul>
</div>
<div class="contentforms">
<h4>Header</h4>
<form>
<div class="colorfield">
<label class="fieldlabel" for="AccessCode"> Background color:</label>
<input id="colorpickerField1" class="input_color" value="#">
</div>
<div class="colorfield">
<label class="fieldlabel" for="AccessCode"> Button color:</label>
<input id="colorpickerField2" class="input_color" value="#"/>
</div>
<div class="colorfield">
<label class="fieldlabel" for="AccessCode"> Lettertype:</label>
<select class="chosen-select input_text" tabindex="1" style="width:360px;" data-placeholder="Select font">
<option value=""></option>
<option value="Arial" class="font-arial">Arial</option>
<option value="Arial black" class="font-arial-black">Arial Black</option>
<option value="Comic sans" class="font-comicsans">Comic sans</option>
<option value="Courier new" class="font-courier">Courier new</option>
<option value="Georgia" class="font-georgia">Georgia</option>
<option value="Helvetica" class="font-helvetica">Helvetica</option>
<option value="Impact" class="font-impact">Impact</option>
<option value="Lucida" class="font-lucida">Lucida</option>
<option value="Palatino" class="font-palatino">Palatino</option>
<option value="Tahoma" class="font-tahoma">Tahoma</option>
<option value="Times new roman" class="font-times">Times New Roman</option>
<option value="Trebuchet" class="font-helvetica">Trebuchet</option>
<option value="Verdana" class="font-verdana">Verdana</option>
<option value="MS Sans serif" class="font-mssansserif">MS Sans serif</option>
</select>
</div>
<div class="colorfield">
<label class="fieldlabel" for="AccessCode"> Header logo:</label>
<input class="input_image" value="Select image"/>
</div>
<!--
<div class="colorfield">
<label class="fieldlabel" for="AccessCode"> Search category:</label>
<input class="input_search" value="Search..."/>
</div>
-->
</form>
<h4>Menu</h4>
<form class="dropzone"></form>
</div>
</div>
<div id="mockup" class="smartphonemockup">
<img class="togglepreview" src="images/toggle_preview.png"/>
<img src="images/iphone_preview.png"/>
<button class="md-trigger bluebutton_radius4 phonepreview_positionfix" data-modal="modal-10">Set up phone view</button>
</div>
<div class="md-modal md-effect-9" id="modal-9">
<div class="md-content">
<h2>Add new page</h2>
<div>
<p>Every page has it's own base functionality, please select the kind of page that you want to add to your app. Select a page and start customizing the design.</p><br/>
<a href="#" class="bluebutton_radius4_addpage"><img class="page_icon" src="images/page_icon_shop.png" alt="page icon"/>Shop pagina</a>
<a href="#" class="bluebutton_radius4_addpage"><img class="page_icon" src="images/page_icon_location.png" alt="page icon"/>Store locator</a>
<a href="#" class="bluebutton_radius4_addpage"><img class="page_icon" src="images/page_icon_facebook.png" alt="page icon"/>Facebook</a>
<a href="#" class="bluebutton_radius4_addpage"><img class="page_icon" src="images/page_icon_contact.png" alt="page icon"/>Contact page</a>
<a href="#" class="bluebutton_radius4_addpage"><img class="page_icon" src="images/page_icon_saved_products.png" alt="page icon"/>Saved products</a>
<a href="#" class="bluebutton_radius4_addpage"><img class="page_icon" src="images/page_icon_info.png" alt="page icon"/>About us</a>
<button class="md-close">Close</button>
</div>
</div>
</div>
<div class="md-modal md-effect-9" id="modal-10">
<div class="md-content">
<h2>Set up live phone view</h2>
<div>
<p>Besides the preview in the browser we offer you the ability to view your app live on your smartphone while building it.
Follow the instructions below to link up your smartphone to AppXelerator. </p><br/>
<p><b>1.</b> Connect your smartphone to the same network as your computer</p>
<p><b>2.</b> Download the AppXelerator app from AppStore for iOs devices or Google Play for Android.</p>
<p><b>3.</b> Log in to the app with your provided username and password.</p>
<p><b>4.</b> Enjoy your live app view!</p>
<button class="md-close">Close</button>
</div>
</div>
</div>
</div> <!-- CONTAINER END -->
<div class="md-overlay"></div>
<!-- OVERLAY POPUP -->
<script src="js/classie.js"></script>
<script src="js/modalEffects.js"></script>
<script src="js/cssParser.js"></script>
<script type="text/javascript">
//Toggle smartphone view
$("#mockup").click( function(event){
event.preventDefault();
if ($(this).hasClass("isDown") ) {
$("#mockup").animate({marginRight:"0px"}, 200);
$(this).removeClass("isDown");
} else {
$("#mockup").animate({marginRight:"300px"}, 200);
$(this).addClass("isDown");
}
return false;
});
</script>
<script type="text/javascript">
//Drag and drop pages
$(function() {
$('.pages').sortable({
items: ':not(.disabled)'
});
});
</script>
<script type="text/javascript">
//Toggle fullscreen browser mode
document.addEventListener("keydown", function(e) {
if (e.shiftKey && e.keyCode == 70) {
toggleFullScreen();
}
}, false);
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
</script>
<script type="text/javascript">
//CHOSEN CUSTOM DROPDOWN
$(document).ready(function(){
$(".chosen-select").chosen();
});
</script>
<script type="text/javascript" src="js/chosen.jquery.js"></script>
<script type="text/javascript" src="js/chosen.proto.js"></script>
</body>
</html>
4 ответов
даже я столкнулся с той же проблемой. После нескольких минут исследования я обнаружил, что нам нужно указать url для элементов, когда не используется форма. Но в вашем случае вы использовали тег формы для реализации dropzone, поэтому он требует действия, подобного..
<form action="some_target_url" class="dropzone"></form>
это сработало для меня..попробовать это.
Я нашел это на веб-сайте dropzone.js в таблице параметров (прокрутите вниз)
<form class="dropzone" id="myDropzone" action="url.php"> в HTML-коде (или даже без указания ID) - это хорошо. Тот сказал:
Url можно указать в javascript в опции-способы сделать это:
1)
если автообнаружение имеет значение true (по умолчанию)
Dropzone.options.myDropzone = { url : "url.php",...
С помощью JS идентификатор формы должен быть объявлен в форме:id="mydropzone" или #my-dropzone
С class="dropzone" - это не достаточно.
Примечание : автообнаружение должно быть объявлено сразу после и до dom готовый.
2)
если Дропзона.автообнаружение = ложь :var myDropzone = new Dropzone("#myDropzone", { url: "url.php",... // JS : Dropzone class
или$("#myDropzone").dropzone({ url: "url.php",... // JS : jquery style
Примечание : вы можете, конечно, использовать другой идентификатор, код будет Dropzone.опции.myOtherId =... , $("#myOtherId").dropzone... так далее.
предупреждение : jQuery документ готов функция обратного вызова и в jQuery 3 :
"Uncaught Error: No URL provided."может случиться еще случиться в одном условии (который привел меня сюда) :
Сценарий 1 :
загрузка dropzone.js и jQuery 2 в
автообнаружение пусть true
затем в документе jQuery готово: Dropzone.опции.myDropzone = { URL-адрес : "URL-адрес.РНР.,"..
-- > все в порядке
вариант 2 :
Переключение на jQuery 3 без каких-либо других изменений : "Uncaught Error: No URL provided."
--> ничего не работает
Кажется, из-за нового способа обработки jQuery doc ready :
https://jquery.com/upgrade-guide/3.0/#breaking-change-document-ready-handlers-are-now-asynchronous
решение с jQuery 3 :
1) пусть автообнаружение в true и поместите весь код вне jQuery doc ready
или
2) Установите автообнаружение в false перед doc ready и объявите параметры (url среди других) через Javascript в doc ready
информация : https://github.com/enyo/dropzone/issues/1423
<form action="files" class="dropzone">
<div class="fallback">
<input type="file" name="file" multiple />
</div>
</form>
та же проблема - простое решение -> я не указал URL dropzone в своей конфигурации.
$("#dZUpload").dropzone({
url: "my-upload-url",
});