那些遇到过的问题

为什么我的dropzone javascript表单不起作用？

Bou*_*mit 9 javascript jquery plugins conflict

救命!

我正在建立一个网站的前端,我正在使用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>
Run Code Online (Sandbox Code Playgroud)

aar*_*ans 12

即使我遇到同样的问题.经过几分钟的研究,我发现我们需要在不使用表单时为元素指定u​​rl.但是在你的情况下你使用了表单标签来实现dropzone,所以它需要一个像...这样的动作.

<form action="some_target_url" class="dropzone"></form>
Run Code Online (Sandbox Code Playgroud)

这对我来说很有用.

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

Rém*_*sor 6

<form class="dropzone" id="myDropzone" action="url.php">在HTML代码中（甚至不指定任何ID）都很好。说：

网址可以在javascript中的options中指定-实现方式：

1）如果自动发现更是让为true（默认） Dropzone.options.myDropzone = { url : "url.php",...
随着JS形式的编号必须与形式宣布：id="mydropzone"或＃我-悬浮窗
有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 ...等。

警告： jQuery文档已准备好回调函数和JQUERY 3：
"Uncaught Error: No URL provided."在一种情况下仍然可能发生（将我带到这里）：


场景1：
在自动发现中加载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/#breaking-change-准备好文件的处理程序现在是异步的

jQuery 3的解决方案：
1）让autodiscover变为true，然后将所有代码放在jQuery doc之外，
或者
2）在document就绪之前将autodiscover设置为false，并通过Javascript IN doc声明选项（包括URL）

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

归档时间：

查看次数：

34818 次

最近记录：

8 年，1 月 前
dropzone.js和jquery版本兼容性 5
更多相关链接
相关归档
AngularJS:禁用提交和服务器响应之间的所有表单控件 121
如何使用ngStyle(angular2)添加背景图像？ 90
为什么在()而不是click()上使用jQuery 84
当用户关闭<div>时,在所有网站页面上隐藏<div> 36
当bootstrap模式关闭时,如何知道单击了哪个按钮？ 34
自动突出显示焦点上的输入字段 32
jQuery UI可调整大小的防火窗口调整大小事件 28
如何使用npm加载引导程序？ 21
MVC 4客户端验证不适用于使用Ajax加载的表单 19
从cordova插件中的AndroidManifest中的"application"标签添加属性 15
难疑归档
JavaScript中使用"严格"做什么,背后的原因是什么？ 7339
如何使div不大于其内容？ 1960
PHP'foreach'如何实际工作？ 1926
迭代对象属性 1904
如何仅列出两次提交之间更改的文件名？ 1807
如何仅从SQL Server DateTime数据类型返回日期 1692
如何将NodeJS和NPM更新到下一个版本？ 1573
如何在SQL中使用JOIN执行UPDATE语句？ 1262
在Node.js中读取环境变量 1240
visibility:hidden和display:none之间有什么区别？ 1121