jQuery 为什么我的 dropzone javascript 表单不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19006939/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is my dropzone javascript form not working?
提问by Boudewijn Smit
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?
我正在构建网站的前端，并且正在使用 dropzone.js 进行图像上传。现在我已经在头部包含了 dropzone.min.js 和 dropzone.css 并且我将 dropzone 类分配给了我想要转换的标签。尽管如此，表单字段并未成为 dropzone 字段。在字段上放置图像会导致浏览器仅像通常那样仅显示图像。我使用了很多不同的 jquery 或 javascript 插件，所以也许有什么导致冲突的原因？
Firebug console says: Uncaught Error: No URL provided.
Firebug 控制台显示：未捕获的错误：未提供 URL。
If you guys could help me out on this one it would be great! Thanks in advance
如果你们能帮我解决这个问题，那就太好了！提前致谢
Here is the complete HTML code
这是完整的 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>
回答by aaramans
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..
甚至我也面临同样的问题。经过几分钟的研究，我发现我们需要在不使用表单时为元素指定 url。但是在您的情况下，您已经使用表单标签来实现 dropzone，因此它需要一个类似的操作..
<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)
我在选项表中的 dropzone.js 网站上找到了这个（向下滚动）
回答by Rémi Levassor
<form class="dropzone" id="myDropzone" action="url.php">in HTML code (or even without specifying any id) is good. That said :
<form class="dropzone" id="myDropzone" action="url.php">在 HTML 代码中（甚至不指定任何 id）是好的。那说：
Url can be specified in javascriptin options - Ways of doing it :
可以在javascript中的选项中指定网址- 这样做的方法：
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.
1）如果自动发现更是让为true（默认）
Dropzone.options.myDropzone = { url : "url.php",...
随着JS形式的编号必须与形式宣布：id="mydropzone"或＃我-悬浮窗
有class="dropzone"是不够的。
注意：必须在 dom 准备好之后和之前声明 autodiscover。
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.
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 function and JQUERY 3:
"Uncaught Error: No URL provided."can happen still happen in one condition (wich brought me here) :
警告：jQuery 文档就绪回调函数和JQUERY 3：
"Uncaught Error: No URL provided."在一种情况下仍然可能发生（将我带到这里）：
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
场景 1：
在 autodiscover 中加载 dropzone.js 和 jQuery 2 让为 true
然后在 jQuery 文档中准备好： Dropzone.options.myDropzone = { url : "url.php",...
--> 一切都很好
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
场景 2：
在没有任何其他更改的情况下切换到 jQuery 3："Uncaught Error: No URL provided."
--> 没有任何效果
似乎是因为 jQuery 处理文档的新方式准备好了：https:
//jquery.com/upgrade-guide/3.0/#break-change-文档就绪处理程序现在是异步的
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
使用 jQuery 3 的解决方案：
1) 让自动发现为 true 并将所有代码放在 jQuery doc 准备好
或
2) 将自动发现设置为 false BEFORE doc ready 并通过 Javascript IN doc ready 声明选项（url 等）
回答by Ravi Panchal
<form action="files" class="dropzone">
<div class="fallback">
<input type="file" name="file" multiple />
</div>
</form>
回答by Manic Depression
Same problem - easy solution -> I did not specify dropzone URL in his configuration.
同样的问题 - 简单的解决方案 -> 我没有在他的配置中指定 dropzone URL。
$("#dZUpload").dropzone({
url: "my-upload-url",
});
