11

帮助!

我正在构建网站的前端,并且正在使用 dropzone.js 进行图像上传。现在我已经在头部包含了 dropzone.min.js 和 dropzone.css,并且我将 dropzone 类分配给了我想要转换的标签。尽管如此,表单字段并没有被制作成 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>
4

4 回答 4

13

甚至我也面临同样的问题。经过几分钟的研究,我发现我们需要在不使用表单时为元素指定 url。但是在您的情况下,您已经使用表单标签来实现 dropzone,因此它需要类似的操作。

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

这对我有用..试试这个。

我在选项表中的 dropzone.js 网站中找到了这个(向下滚动)

于 2013-10-01T08:22:52.150 回答
5

<form class="dropzone" id="myDropzone" action="url.php">在 HTML 代码中(甚至没有指定任何 id)很好。那说:

可以在javascript中的选项中指定 URL - 方法:

1) 如果让 autodiscover 为 true (默认) 使用 JS,表单的 id 必须在Dropzone.options.myDropzone = { url : "url.php",...
form :id="mydropzone"或 #my-dropzone中声明是不够的。注意:自动发现必须在 dom 就绪之后和之前声明。
class="dropzone"

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... 等。

警告: jQuery 文档就绪回调函数和JQUERY 3
"Uncaught Error: No URL provided."在一种情况下仍然可能发生(我把我带到了这里):


场景 1:
在 autodiscover 中加载 dropzone.js 和 jQuery 2,
然后在 jQuery 文档中准备好: Dropzone.options.myDropzone = { url : "url.php",...
--> 一切都很好


场景 2:
切换到 jQuery 3 而不进行任何其他更改:"Uncaught Error: No URL provided."
-> 没有任何效果

这似乎是因为 jQuery 处理文档的新方式已准备就绪: https ://jquery.com/upgrade-guide/3.0/#break-change-文档就绪处理程序现在是异步的

使用 jQuery 3 的解决方案:
1)让 autodiscover 为 true 并将所有代码 jQuery doc 准备好

2)在 doc 准备好之前将 autodiscover 设置为 false 并通过 Javascript IN doc 准备好声明选项(url 等)

信息: https ://github.com/enyo/dropzone/issues/1423

于 2016-11-04T11:40:49.897 回答
1

同样的问题 - 简单的解决方案 -> 我没有在他的配置中指定 dropzone URL。

        $("#dZUpload").dropzone({
            url: "my-upload-url",
        });
于 2016-08-24T12:52:58.767 回答
0
<form action="files" class="dropzone">
    <div class="fallback">
        <input type="file" name="file" multiple />
    </div>
</form>
于 2016-02-17T11:23:25.043 回答