Pourquoi mon dropzone forme javascript ne fonctionne pas?

AIDER!

Je suis en train de construire le front-end d'un site web et je suis en utilisant dropzone.js pour les images. Maintenant, je ai inclus le dropzone.min.js et la dropzone.css dans la tête et j'ai asigned la dropzone de classe à la balise j'ai voulu convertir. Malgré cela, le champ de formulaire n'est pas faite en un dropzone champ. Déposer les images sur les résultats sur le terrain dans le navigateur, il suffit de montrer seulement l'image comme il l'aurait fait habituellement. J'ai utiliser beaucoup de différents jquery ou javascript, des plug-ins alors peut-être il ya quelque chose de provoquant un conflit?

De la console de Firebug dit: Uncaught Error: No URL fournie.

Les gars si vous pourriez m'aider sur ce point il serait grand!
Merci d'avance

Voici le code HTML complète

<!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>

voir ce lien j'ai trouvé la solution

OriginalL'auteur Boudewijn Smit | 2013-09-25

12

Même j'ai été confronté au même problème. Après quelques minutes de recherche, j'ai trouvé que nous avons besoin de spécifier l'url pour les éléments lorsque vous n'utilisez pas le formulaire. Mais dans votre cas vous avez utilisé la balise de formulaire pour la mise en œuvre de dropzone, il exige une action de ce type..
```
<form action="some_target_url" class="dropzone"></form>
```
cela a fonctionné pour moi..essayez ceci.

J'ai trouvé ça dans le site web de dropzone.js dans les options de la table(en bas)

Grande, en effet, c'était le problème! Ajouter une action="#" à la balise form et ça fonctionne très bien.
est-il un moyen de le faire sans l'action de la balise, afin de ne pas faire un appel http? je suis en train de faire l'appel dans mon fichier javascript, mais si il y a de l'action, alors ça fait 2 appels de total. Je suis en train de faire dans mon fichier javascript afin que je puisse récupérer des données à partir du serveur tout en un appel
Comment puis-je ajouter des url de l'action Si je ne veux pas utiliser le formulaire ??
pas de travail. je ne suis pas vraiment sûr pourquoi peut-être problème avec la dernière version

OriginalL'auteur aaramans
2

<form class="dropzone" id="myDropzone" action="url.php"> dans le code HTML (ou même sans spécifier aucune id) est bonne. Qui a dit :

L'Url peut être spécifié dans javascript dans les options Façons de le faire :

1)
si la découverte automatique est à true (par défaut)
Dropzone.options.myDropzone = { url : "url.php",...

Avec JS l'id du formulaire doit être déclarée dans le formulaire : id="mydropzone" ou #mon-dropzone
Avoir class="dropzone" n'est pas assez.

Remarque : service de découverte automatique doit être déclaré juste après et avant dom prêt.

2)
si Dropzone.découverte automatique = false :

var myDropzone = new Dropzone("#myDropzone", { url: "url.php",... //JS : Dropzone class

ou

$("#myDropzone").dropzone({ url: "url.php",... //JS : jquery style

Remarque : vous pouvez bien sûr utiliser un autre identifiant, le code sera Dropzone.des options.myOtherId =... , $("#myOtherId").dropzone... etc.

avertissement : jQuery document prêt fonction de rappel et JQUERY 3 :

"Uncaught Error: No URL provided." peut arriver encore arriver à une seule condition (qui m'a amené ici) :

Scénario 1 :

chargement dropzone.js et jQuery 2 dans
découverte automatique de laisser à vrai

ensuite, jQuery dans le document de prêt : Dropzone.des options.myDropzone = { url : "url.php",...

--> tout est beau

Scénario 2 :

Commutation de jQuery 3 sans aucun autre changement : "Uncaught Error: No URL provided."

--> rien

Il semble être à cause de la nouvelle façon de jQuery poignée doc prêt :
https://jquery.com/upgrade-guide/3.0/#breaking-change-document-ready-handlers-are-now-asynchronous

Solution avec jQuery 3 :

1) faites la découverte automatique de vrai et de mettre TOUT le code en DEHORS de jQuery doc prêt

ou

2) définir la découverte automatique à faux AVANT de doc prêt et de déclarer les options d'url (entre autres) par l'intermédiaire de Javascript DANS la doc prêt

INFOS :
https://github.com/enyo/dropzone/issues/1423

OriginalL'auteur Rémi Levassor

<form action="files" class="dropzone">
<div class="fallback">
<input type="file" name="file" multiple />
</div>
</form>

OriginalL'auteur Ravi Panchal

1

Même problème - solution facile -> je n'ai pas préciser dropzone URL dans sa configuration.
```
        $("#dZUpload").dropzone({
url: "my-upload-url",
});
```
OriginalL'auteur Manic Depression

Vous devez vous connecter pour publier un commentaire.