Why is my dropzone javascript form not working?

2020-08-17 07:47发布

站内文章 / JavaScript
133 0 0

问题:

HELP!

I'm building the front end of a website and I'm using dropzone.js for image uploads. Now I've included the dropzone.min.js and the dropzone.css in the head and I asigned the dropzone class to the tag i wanted to convert. Despite this the form field isn't made into a dropzone field. Dropping images on the field results in the browser just showing only the image like it would usually do. I use a lot of different jquery or javascript plug ins so maybe there's something causing a conflict?

Firebug console says: Uncaught Error: No URL provided.

If you guys could help me out on this one it would be great! Thanks in advance

Here is the complete 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>

回答1:

Even I faced the same problem. After some minutes of research, I found that we need to specify url for elements when not using form. But in your case you have used form tag for implementing dropzone, so it requires an action like..

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

this worked for me..try this.

I found this in the website of dropzone.js in options table(scroll down)



回答2:

<form class="dropzone" id="myDropzone" action="url.php"> in HTML code (or even without specifying any id) is good. That said :

Url can be specified in javascript in options - Ways of doing it :

1) if autodiscover is let to true (default) Dropzone.options.myDropzone = { url : "url.php",...
With JS the id of the form must be declared in form : id="mydropzone" or #my-dropzone
Having class="dropzone" is not enough.
Note : autodiscover must be declared just after and before dom ready.

2) if Dropzone.autoDiscover = false :
var myDropzone = new Dropzone("#myDropzone", { url: "url.php",... // JS : Dropzone class
or
$("#myDropzone").dropzone({ url: "url.php",... // JS : jquery style
Note : you can of course use another id, code will be Dropzone.options.myOtherId =... , $("#myOtherId").dropzone... etc.

warning : jQuery document ready callback function and JQUERY 3 :
"Uncaught Error: No URL provided." can happen still happen in one condition (wich brought me here) :


Scenario 1 :
loading dropzone.js and jQuery 2 in autodiscover let to true
then, in jQuery document ready : Dropzone.options.myDropzone = { url : "url.php",...
--> all is fine


Scenario 2 :
Switching to jQuery 3 without any other change : "Uncaught Error: No URL provided."
--> nothing work

It seems to be because of the new way jQuery handle doc ready : https://jquery.com/upgrade-guide/3.0/#breaking-change-document-ready-handlers-are-now-asynchronous

Solution with jQuery 3 :
1) let autodiscover to true and put ALL code OUTSIDE jQuery doc ready
or
2) set autodiscover to false BEFORE doc ready and declare options (url among others) via Javascript IN doc ready

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



回答3:

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


回答4:

Same problem - easy solution -> I did not specify dropzone URL in his configuration.

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


标签： javascript jquery plugins conflict
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~