为什么我的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
Add new page
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.
Shop pagina Store locator Facebook Contact page Saved products About us Set up live phone view
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.
1. Connect your smartphone to the same network as your computer
2. Download the AppXelerator app from AppStore for iOs devices or Google Play for Android.
3. Log in to the app with your provided username and password.
4. Enjoy your live app view!
//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(); });
即使我遇到同样的问题。 经过几分钟的研究,我发现我们需要在不使用表单时为元素指定url。 但是在你的情况下你使用了表单标签来实现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", });