无效的拖放区元素
Invalid dropzone element
此应用程序是在 Laravel 7 中构建的,我使用 webpack 引入了 javascript。当我尝试创建一个新的 Dropzone 元素时,它给我这个错误:
Uncaught Error: Invalid dropzone element.
.这是我的 JavaScript 代码:
window.Dropzone = require('dropzone/dist/dropzone.js');
Dropzone.autoDiscover = false;
$(function () {
if (document.getElementById('pdfDropzone')) {
var myDropzone = new Dropzone("div#pdfDropzone", { url: "/success" });
Dropzone.options.pdfDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
acceptedFiles: ".pdf", //
accept: function (file, done) {
done();
}
};
$("#pdfButton").click(function (e) {
e.preventDefault();
myDropzone.processQueue();
});
}
});
这是HTML:
<form action="/success" id="pdfDropzone" method="post" enctype="multipart/form-data" class="dropzone pdf-drop row align-content-center">
@csrf
<button class="dz-button col-2" id="pdfButton">
<i class="far fa-file-alt"></i><br>
PDF
</button>
<div class="dz-message col-8 align-self-center">Drag PDF file here or click to browse </div>
<div class="fallback">
<input name="file" type="file" />
</div>
</form>
如何消除这个错误?
我通过创建 2 个新表单解决了这个问题,如下所示:
<div>
<form action="/pdf_upload" enctype="multipart/form-data" method="post" id="pdfDropzone" class="uploadzone pdf-drop row align-content-center">
@csrf
<!-- Dropzone pdf-->
<button class="dz-button col-2">
<i class="far fa-file-alt"></i><br>
PDF
</button>
<div class="dz-message col-8 align-self-center">Drag PDF file here or click to browse </div>
<div class="fallback">
<input name="pdf_file" type="file" />
</div>
</form>
<!-- End Dropzone -->
<!-- Dropzone tumbnail-->
<form action="/image_upload" enctype="multipart/form-data" method="post" id="imgDropzone" class="uploadzone img-drop col justify-content-center">
@csrf
<button class="dz-button">
<i class="far fa-file-alt"></i><br>
jpg, png, jpeg
</button>
<div class="dz-message align-self-center">Drag image file here or<br>click to browse</div>
<div class="fallback">
<input name="image_file" type="file" />
</div>
</form>
<!-- End Dropzone -->
</div>
然后在 app.js 我添加了这个:
require('dropzone');
$(function () {
Dropzone.autoDiscover = false;
var dropzoneOptionsPdf = {
paramName: "file",
maxFilesize: 20, // MB
addRemoveLinks: true,
acceptedFiles: "application/pdf",
init: function () {
this.on("maxfilesexceeded", function (file) {
this.removeFile(file);
});
}
};
var dropzoneOptionsImage = {
paramName: "file",
maxFilesize: 20, // MB
addRemoveLinks: true,
acceptedFiles: "image/*",
init: function () {
this.on("success", function (file) {
console.log("success > " + file.name);
});
}
};
var pdfDropzone = new Dropzone("#pdfDropzone", dropzoneOptionsPdf);
var imgDropzone = new Dropzone("#imgDropzone", dropzoneOptionsImage);
});
希望对遇到同样问题的人有所帮助!
此应用程序是在 Laravel 7 中构建的,我使用 webpack 引入了 javascript。当我尝试创建一个新的 Dropzone 元素时,它给我这个错误:
Uncaught Error: Invalid dropzone element.
.这是我的 JavaScript 代码:
window.Dropzone = require('dropzone/dist/dropzone.js');
Dropzone.autoDiscover = false;
$(function () {
if (document.getElementById('pdfDropzone')) {
var myDropzone = new Dropzone("div#pdfDropzone", { url: "/success" });
Dropzone.options.pdfDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
acceptedFiles: ".pdf", //
accept: function (file, done) {
done();
}
};
$("#pdfButton").click(function (e) {
e.preventDefault();
myDropzone.processQueue();
});
}
});
这是HTML:
<form action="/success" id="pdfDropzone" method="post" enctype="multipart/form-data" class="dropzone pdf-drop row align-content-center">
@csrf
<button class="dz-button col-2" id="pdfButton">
<i class="far fa-file-alt"></i><br>
PDF
</button>
<div class="dz-message col-8 align-self-center">Drag PDF file here or click to browse </div>
<div class="fallback">
<input name="file" type="file" />
</div>
</form>
如何消除这个错误?
我通过创建 2 个新表单解决了这个问题,如下所示:
<div>
<form action="/pdf_upload" enctype="multipart/form-data" method="post" id="pdfDropzone" class="uploadzone pdf-drop row align-content-center">
@csrf
<!-- Dropzone pdf-->
<button class="dz-button col-2">
<i class="far fa-file-alt"></i><br>
PDF
</button>
<div class="dz-message col-8 align-self-center">Drag PDF file here or click to browse </div>
<div class="fallback">
<input name="pdf_file" type="file" />
</div>
</form>
<!-- End Dropzone -->
<!-- Dropzone tumbnail-->
<form action="/image_upload" enctype="multipart/form-data" method="post" id="imgDropzone" class="uploadzone img-drop col justify-content-center">
@csrf
<button class="dz-button">
<i class="far fa-file-alt"></i><br>
jpg, png, jpeg
</button>
<div class="dz-message align-self-center">Drag image file here or<br>click to browse</div>
<div class="fallback">
<input name="image_file" type="file" />
</div>
</form>
<!-- End Dropzone -->
</div>
然后在 app.js 我添加了这个:
require('dropzone');
$(function () {
Dropzone.autoDiscover = false;
var dropzoneOptionsPdf = {
paramName: "file",
maxFilesize: 20, // MB
addRemoveLinks: true,
acceptedFiles: "application/pdf",
init: function () {
this.on("maxfilesexceeded", function (file) {
this.removeFile(file);
});
}
};
var dropzoneOptionsImage = {
paramName: "file",
maxFilesize: 20, // MB
addRemoveLinks: true,
acceptedFiles: "image/*",
init: function () {
this.on("success", function (file) {
console.log("success > " + file.name);
});
}
};
var pdfDropzone = new Dropzone("#pdfDropzone", dropzoneOptionsPdf);
var imgDropzone = new Dropzone("#imgDropzone", dropzoneOptionsImage);
});
希望对遇到同样问题的人有所帮助!