为什么我的dropzone javascript表单不起作用？ [英] Why is my dropzone javascript form not working?
本文介绍了为什么我的dropzone javascript表单不起作用？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
帮助！
我正在构建网站的前端，我正在使用dropzone.js进行图片上传。现在我已经将dropzone.min.js和dropzone.css包含在头部中，并将dropzone类分配给我想要转换的标签。尽管如此，表单字段不会成为dropzone字段。在该字段上删除图像会导致浏览器只显示通常所做的图像。我使用了很多不同的jquery或javascript插件，所以可能会有一些导致冲突的东西？
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?
Firebug控制台说：未捕获错误：未提供URL。
Firebug console says: Uncaught Error: No URL provided.
如果你们能帮我解决这个问题，那就太好了！
提前致谢
If you guys could help me out on this one it would be great! Thanks in advance
以下是完整的HTML代码
Here is the complete HTML code
<!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，所以它需要一个像...这样的动作。
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..
<form action="some_target_url" class="dropzone"></form>
这对我有用..试试这个。
this worked for me..try this.
我在选项表中的dropzone.js网站上找到了这个（向下滚动）
I found this in the website of dropzone.js in options table(scroll down)
这篇关于为什么我的dropzone javascript表单不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
