为什么我的拖放区 JavaScript 表单不起作用
Why is my dropzone javascript form not working?
救命！
我正在构建网站的前端，并且正在使用dropzone.js进行图像上传。现在我已经在头部包含了dropzone.min.js和dropzone.css，我将dropzone类分配给了我要转换的标签。尽管如此，表单字段不会变成拖放区字段。将图像放在字段上会导致浏览器只显示图像，就像通常一样。我使用了很多不同的jquery或javascript插件，所以也许有什么东西导致了冲突？
火虫控制台 说： 未捕获的错误： 没有提供 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>
即使我也遇到了同样的问题。经过几分钟的研究，我发现我们需要在不使用表单时为元素指定 url。但是在您的情况下，您已经使用了表单标签来实现dropzone，因此它需要这样的操作。
<form action="some_target_url" class="dropzone"></form>
这对我有用..试试这个。
我在 dropzone 的网站上找到了这个.js在选项表中(向下滚动(
HTML
代码中的<form class="dropzone" id="myDropzone" action="url.php">(甚至没有指定任何id(是好的。可是：
url可以在javascript的选项中指定 - 这样做的方法：
1(如果允许自动发现为 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...等。
警告：jQuery文档就绪回调函数和JQUERY 3：
"Uncaught Error: No URL provided."可能发生的情况仍然发生在一种情况下(将我带到这里(：
场景 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(在文档就绪之前将自动发现设置为假，并通过Javascript IN doc ready声明选项(url等(
信息：https://github.com/enyo/dropzone/issues/1423
同样的问题 - 简单的解决方案 -> 我没有在他的配置中指定拖放区 URL。
$("#dZUpload").dropzone({
url: "my-upload-url",
});
<form action="files" class="dropzone">
<div class="fallback">
<input type="file" name="file" multiple />
</div>
</form>
相关文章：
- 动态Javascript表单不起作用
- 带有select的jquery提交表单不起作用
- 下拉 jquery 方法发布表单不起作用
- JavaScript onChange 事件侦听器对输入表单不起作用
- 带有javascript按钮的PHP表单-不起作用
- 使用AJAX提交表单不起作用
- Jquery Modal/Dialog表单不起作用
- 使用Javascript提交表单不起作用
- 事件委派后表单不起作用
- 为什么在IE和Chrome中提交表单不起作用
- 根据<选择>动态创建的表单不起作用
- 在Kentico中使用response.write重定向HTML表单不起作用
- 移动响应表单不起作用
- 联系表单不起作用(Php 端）
- 使用 jQuery POST 和 php 序列化和提交表单不起作用
- 通过 ajax 提交表单不起作用
- 在 Javascript 中验证表单不起作用
- e.防止默认和 asp.net 登录表单不起作用
- 为什么我的拖放区 JavaScript 表单不起作用
- 使用 Javascript 提交表单不起作用
