如何解决dropzone.js有2种单独的形式
我有一个网站,用户可以在其中上传PDF文件和图像文件。我希望用户能够将PDF表单上的PDF文件和图像表单上的图像文件拖动。然后,我希望用户能够验证上传的文件,并且仅在单击“开始”按钮时将其发送到服务器。此代码仅适用于PDF文件,不适用于图像文件。 imgDropzone上的事件侦听器均未调用。例如,当我将console.log(file)
放入
imgDropzone.on("addedfile",function (file) {
file.previewElement.querySelector(".start").onclick = function () { imgDropzone.enqueueFile(file); };
});
控制台为空,没有错误。如何在同时使用2个单独的PDF和图像文件格式的同时保留dropzone功能?这是我的代码:
<div>
<form action="/pdf_upload" enctype="multipart/form-data" method="post" id="pdfDropzone" class="dropzone pdf-drop row align-content-center">
@csrf
<!-- Dropzone pdf-->
<button class="dz-button col-2" disabled>
<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="dropzone img-drop col justify-content-center">
@csrf
<button class="dz-button" disabled>
<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>
Dropzone.autoDiscover = false;
$(function () {
// Get the HTML template and remove it from the document for image dropzone
var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
var imgDropzone = new Dropzone("#imgDropzone",{
maxFilesize: 10,acceptedFiles: "image/*",maxFiles: 1,previewTemplate: previewTemplate,autoQueue: false,previewsContainer: "#previews",});
var pdfDropzone = new Dropzone("#pdfDropzone",{
maxFilesize: 20,acceptedFiles: "application/pdf",});
//
//
// Setup Config For Pdf dropzone
//
//
pdfDropzone.on("addedfile",function (file) {
file.previewElement.querySelector(".start").onclick = function() { pdfDropzone.enqueueFile(file); };
});
pdfDropzone.on("totaluploadprogress",function (progress) {
document.querySelector(".progress").style.width = progress + "%";
});
pdfDropzone.on("sending",function (file) {
document.querySelector(".progress-bar").style.opacity = "1";
file.previewElement.querySelector(".start").setAttribute("disabled","disabled");
});
pdfDropzone.on("queuecomplete",function (progress) {
document.querySelector(".progress").style.opacity = "0";
});
pdfDropzone.on("success",function (file,message) {
var formData = document.getElementById('patDetails');
var input = document.createElement("input");
input.type = "hidden";
input.name = "pdf_file";
input.value = message;
formData.appendChild(input);
});
document.querySelector("#actions .start").onclick = function () {
pdfDropzone.enqueueFiles(pdfDropzone.getFilesWithStatus(Dropzone.ADDED));
};
document.querySelector("#actions .cancel").onclick = function () {
pdfDropzone.removeAllFiles(true);
};
//
//
// Setup Config For Image Dropzone
//
//
imgDropzone.on("addedfile",function (file) {
file.previewElement.querySelector(".start").onclick = function () { imgDropzone.enqueueFile(file); };
});
imgDropzone.on("totaluploadprogress",function (progress) {
document.querySelector(".progress").style.width = progress + "%";
});
imgDropzone.on("sending","disabled");
});
imgDropzone.on("queuecomplete",function (progress) {
document.querySelector(".progress").style.opacity = "0";
});
imgDropzone.on("success",message) {
var formData = document.getElementById('patDetails');
var input = document.createElement("input");
input.type = "hidden";
input.name = "image_file";
input.value = message;
formData.appendChild(input);
});
document.querySelector(".start").onclick = function () {
imgDropzone.enqueueFiles(imgDropzone.getFilesWithStatus(Dropzone.ADDED));
};
document.querySelector(".cancel").onclick = function () {
imgDropzone.removeAllFiles(true);
};
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。