web-dev-qa-db-ja.com

Dropzone JavaScriptフォームが機能しないのはなぜですか？

助けて！

私はウェブサイトのフロントエンドを構築しており、画像のアップロードにdropzone.jsを使用しています。これで、dropzone.min.jsとdropzone.cssをヘッドに含め、変換したいタグにdropzoneクラスを割り当てました。これにもかかわらず、フォームフィールドはドロップゾーンフィールドにはなりません。フィールドに画像をドロップすると、通常のように画像のみがブラウザに表示されます。さまざまなjqueryまたはjavascriptプラグインを使用しているため、競合が発生している可能性があります。

Firebugコンソールは言う：キャッチされていないエラー：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>
javascriptjquerypluginsconflict
11
Boudewijn Smit

私も同じ問題に直面しました。数分の調査の結果、フォームを使用しない場合は要素のURLを指定する必要があることがわかりました。しかし、あなたの場合、dropzoneの実装にformタグを使用しているため、次のようなアクションが必要です。

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

これは私のために働いた..これを試してください.

これは、dropzone.jsのWebサイトのオプションテーブルにあります（スクロールダウン）

13
aaramans

HTMLコードの_<form class="dropzone" id="myDropzone" action="url.php">_（またはIDを指定しなくても）は適切です。それは言った：

URLは、オプションのjavascriptで指定できます-方法：

1）autodiscoverをtrueにした場合（デフォルト）_Dropzone.options.myDropzone = { url : "url.php",..._
JSでは、フォームのIDをフォームで宣言する必要があります：_id="mydropzone"_または＃my-dropzone
_class="dropzone"_を使用するだけでは不十分です。
注：自動検出は、domの準備の前後に宣言する必要があります。

2）Dropzone.autoDiscover = falseの場合：
_var myDropzone = new Dropzone("#myDropzone", { url: "url.php",... // JS : Dropzone class_
または
$("#myDropzone").dropzone({ url: "url.php",... // JS : jquery style
注：もちろん別のIDを使用できます。コードはDropzone.options.myOtherId = ...、$（ "＃myOtherId"）。dropzoneになります。 ..など.

warning：jQuery document ready callback関数とJQUERY 3：
_"Uncaught Error: No URL provided."_は、1つの条件で発生する可能性があります（ここに連れてきました）：


シナリオ1：
自動検出でdropzone.jsとjQuery 2をロードしてtrueにします
次に、jQueryドキュメントで準備完了：Dropzone.options.myDropzone = {url： "url.php"、...
->すべて大丈夫


シナリオ2：
他に変更を加えずにjQuery 3に切り替える：_"Uncaught Error: No URL provided."_
->何も機能しない

それはjQueryがドキュメントを準備する新しい方法が原因であるようです： https://jquery.com/upgrade-guide/3.0/#breaking-change-document-ready-handlers-are- now-asynchronous

JQuery 3によるソリューション：
1）自動検出をtrueにして、jQueryドキュメントの外側にあるすべてのコードを準備します
または
2）ドキュメントの準備が整う前にautodiscoverをfalseに設定し、Javascript IN doc readyを介してオプション（とりわけURL）を宣言します

情報： https://github.com/enyo/dropzone/issues/142

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

同じ問題-簡単な解決策->彼の設定でドロップゾーンURLを指定しませんでした。

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