wake-up-neo.net

Warum funktioniert mein Dropzone-Javascript-Formular nicht?

HILFE!

Ich erstelle das Frontend einer Website und verwende dropzone.js für das Hochladen von Bildern. Jetzt habe ich die dropzone.min.js und die dropzone.css in den Kopf eingefügt und die dropzone-Klasse dem Tag zugewiesen, das ich konvertieren wollte. Trotzdem wird das Formularfeld nicht in ein Dropzone-Feld umgewandelt. Wenn Sie Bilder auf dem Feld ablegen, wird im Browser nur das Bild angezeigt, wie es normalerweise der Fall ist. Ich verwende viele verschiedene JQuery- oder Javascript-Plug-Ins. Vielleicht verursacht also etwas einen Konflikt?

Die Firebug-Konsole meldet: Nicht erfasster Fehler: Keine URL angegeben.

Wenn ihr mir dabei helfen könntet, wäre es großartig! Danke im Voraus

Hier ist der komplette HTML-Code

<!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>
8
Boudewijn Smit

Sogar ich hatte das gleiche Problem. Nach einigen Minuten der Recherche habe ich festgestellt, dass wir URLs für Elemente angeben müssen, wenn Sie kein Formular verwenden. In Ihrem Fall haben Sie jedoch das Form-Tag für die Implementierung von dropzone verwendet. Daher ist eine Aktion wie .. erforderlich.

<form action="some_target_url" class="dropzone"></form>

das hat für mich funktioniert.

Ich habe dies auf der Website von dropzone.js in der Optionentabelle gefunden (nach unten scrollen)

12
aaramans

<form class="dropzone" id="myDropzone" action="url.php"> Im HTML-Code (oder auch ohne Angabe einer ID) ist gut. Das gesagt :

Die URL kann in den Optionen in Javascript angegeben werden.

1) wenn Autodiscover auf true gesetzt ist (Standard) Dropzone.options.myDropzone = { url : "url.php",...
Bei JS muss die ID des Formulars in form deklariert werden: id="mydropzone" Oder # my-dropzone
class="dropzone" Ist nicht genug.
Hinweis: autodiscover muss kurz nach und vor dom ready deklariert werden.

2) falls Dropzone.autoDiscover = false:
var myDropzone = new Dropzone("#myDropzone", { url: "url.php",... // JS : Dropzone class
oder
$("#myDropzone").dropzone({ url: "url.php",... // JS : jquery style
Hinweis: Sie können natürlich eine andere ID verwenden. Der Code lautet Dropzone.options.myOtherId = ..., $ ("# myOtherId"). Dropzone ... etc .

Warnung: Rückruffunktion "jQuery document ready" und JQUERY 3 :
"Uncaught Error: No URL provided." Kann immer noch unter einer Bedingung passieren (was mich hierher gebracht hat):


Szenario 1 :
Laden von dropzone.js und jQuery 2 in Autodiscover auf true
dann in jQuery document ready: Dropzone.options.myDropzone = {url: "url.php", ...
-> alles ist gut


Szenario 2:
Ohne weitere Änderung zu jQuery 3 wechseln: "Uncaught Error: No URL provided."
-> nichts funktioniert

Es scheint an der neuen Art zu liegen, wie das jQuery-Handle doc bereit ist: https://jquery.com/upgrade-guide/3.0/#breaking-change-document-ready-handlers-are- jetzt-asynchron

Lösung mit jQuery 3:
1) Autodiscover auf true setzen und ALLEN Code AUSSERHALB des jQuery-Dokuments bereitstellen
oder
2) Autodiscover auf false BEFORE doc ready setzen und Optionen (ua URL) über Javascript IN doc ready deklarieren

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

5
Rémi Levassor
<form action="files" class="dropzone">
    <div class="fallback">
        <input type="file" name="file" multiple />
    </div>
</form>
1
Ravi Panchal

Gleiches Problem - einfache Lösung -> Ich habe in seiner Konfiguration keine Dropzone-URL angegeben.

        $("#dZUpload").dropzone({
            url: "my-upload-url",
        });
1