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

救命!

我正在建立一个网站的前端,我正在使用dropzone.js进行图片上传。 现在我已经将dropzone.min.js和dropzone.css包含在头部中,并将dropzone类分配给我想要转换的标签。 尽管如此,表单字段不会成为dropzone字段。 在该字段上删除图像会导致浏览器只显示通常所做的图像。 我使用了很多不同的jquery或javascript插件,所以可能会有一些导致冲突的东西?

Firebug控制台说:未捕获错误:未提供URL。

如果你们能帮我解决这个问题,那就太好了! 提前致谢

这是完整的HTML代码

                        AppXelerator   

Pages

  • Home (locked)
  • Shop
  • Saved products
  • About us
  • Store locator
<!---->

Home

Header

Arial Arial Black Comic sans Courier new Georgia Helvetica Impact Lucida Palatino Tahoma Times New Roman Trebuchet Verdana MS Sans serif
<!--
-->

Menu

//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; }); //Drag and drop pages $(function() { $('.pages').sortable({ items: ':not(.disabled)' }); }); //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(); } } } //CHOSEN CUSTOM DROPDOWN $(document).ready(function(){ $(".chosen-select").chosen(); });

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

 

这对我来说很有用。

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

HTML代码中的

(甚至没有指定任何id)是好的。 那说:

可以在选项中的javascript中指定url – 方法:

1)如果自动发现被设为真(默认) Dropzone.options.myDropzone = { url : "url.php",...
对于JS,表单的id必须以forms声明: 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处理doc的新方法准备好了: https : //jquery.com/upgrade-guide/3.0/#breaking-change-document-ready-handlers-are-now-asynchronous

使用jQuery 3的解决方案:
1)让autodiscover为true并将所有代码OUTSIDE jQuery doc准备好
要么
2)在doc ready之前将autodiscover设置为false并通过Javascript IN doc准备声明选项(url等)

INFOS: https : //github.com/enyo/dropzone/issues/1423

 

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

  $("#dZUpload").dropzone({ url: "my-upload-url", });