问题
First: this is not a duplicate question, as I didn't find any answer that is working out there.
I am trying to use Dropzonejs inside a form, the documentation is not working, also; all answers out there is not working too.
I need a working example, as I have tried so many examples and answers without any luck to get it to work.
Please advise.
<form enctype="multipart/form-data" action="action" accept-charset="UTF-8" method="post" novalidate="novalidate" class="dropzone">
<div class="row">
<div class="col-xs-10">
</div>
<div class="col-xs-2" id="dropClickable">
Drop Your File here...!!
</div>
</div>
</form>
<script>
Dropzone.autoDiscover = false;
jQuery(document).ready(function() {
Dropzone.options.myAwesomeDropzone = {
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
init: function () {
// Do your update and process stuff
}
}
})
</script>
Also; tried this example, and got nothing to work:
https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone
And that's what I get:
回答1:
Looks like the Dropzone stuff is executing before the browser finished loading.
Wrap your javascript with window.onload = function() {
or $(function() {
<script>
$(function() {
Dropzone.autoDiscover = false;
jQuery(document).ready(function() {
Dropzone.options.myAwesomeDropzone = {
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
init: function () {
// Do your update and process stuff
}
}
})
})
</script>
With those changes the code now works on my machine; using jquery 3.3.1 and latest Dropzone
For your second example;
Let's open up dev tools (F12) and go to debug, we see:Error: No URL provided.
Clicking into the line tells us why...
if (_this.options.url == null) {
_this.options.url = _this.element.getAttribute("action");
}
if (!_this.options.url) {
throw new Error("No URL provided.");
}
So if we set (in the <form>
) action= "test.php"
the page now works.
来源:https://stackoverflow.com/questions/50351729/using-dropzone-inside-a-form