Javascript 如何将Dropzone.js与多个输入和选择字段结合使用

我试图让dropzone.js使用多个输入并选择字段

在阅读dropzone.js文档时，我还看到dropzone表单看起来像一个独立的表单。因此，当我试图在dropzone表单中添加更多的输入和选择字段时，整个表单被dropzone覆盖，我只希望其中一部分是dropzone。我还发现我可以通过阅读其他stackoverflow文章来修复它

我所做的是我创建了一个表单，有3个输入字段，7个选择选项和+1个dropzone，我有一个提交按钮，应该一起提交

我关注了这篇文章：

问题：当我提交表单时，文件开始上传进度动画显示，但文件没有上传到服务器，表单没有完全提交，字段值也没有发送到数据库

这是表单开始代码：

<form  id="drform" name="formapdf2" method="post" action="dodaj-save.php" autocomplete="off" enctype="multipart/form-data">

---

我也有用于上传的PHP代码，但我不确定PHP代码是否是问题所在，我是否应该在这里也显示此代码。如果您还需要什么来确定问题所在，请告诉我。我希望我没有违反任何stackoverflow规则，因为这是我的第一篇文章。

试试这个。这和你现在做的有点不同，但是效果非常好

您可以做的第一件事是在$document之外添加Dropzone.js，以阻止Dropzone.js自动检测表单标记。readyfunction{}：

然后使用AJAX函数创建Dropzone实例。在$document.readyfunction{}内部执行此操作，但在按钮单击事件外部执行此操作：

然后循环浏览所有附件，并在单击“提交”按钮时连续处理所有附件：

const uploadBtn = document.querySelector('#sbmtbutton');
uploadBtn.addEventListener('click', () => {
    const acceptedFiles = myDropzone.getAcceptedFiles();
    for (let i = 0; i < acceptedFiles.length; i++) {
        myDropzone.processFile(acceptedFiles[i])
    }
})

这一切都来自Javascript方面。在PHP文件中，您可以处理文件并将其移动到服务器上的文件夹：

<?php

    $folder_name = 'path-to-your-folder/';

    if (!empty($_FILES)) {
        $temp_file = $_FILES['file']['tmp_name'];
        $filename = $_POST['tags'].'.svg'; //Grabbing those tags that I appended to formData in the AJAX request and renaming the file based on those tags. Be sure to add your image extension
        $location = $folder_name.$filename;
        move_uploaded_file($temp_file, $location);
    }

?>

我希望这有帮助！=同样重要的是要注意，如果希望在本地机器上测试时PHP运行，那么必须在本地服务器上运行。您可以通过以下方式设置本地服务器

---

您可以使用PHP和JS从服务器返回图像并在客户端显示，但这可能超出了本问题的范围。如果你想让我添加它，只需在评论中提及它，我将添加它作为答案的更新

您是否尝试使用$document.ready或等待dom初始化？@DanielChernenkov我现在尝试添加$document.readyfunction{但当我添加时，我发布的java脚本不再工作。谢谢

Dropzone.autoDiscover = false;

let myDropzone = new Dropzone('.dropzone', { //Give your input (or form if you're not sending anything else) a class of dropzone
    autoProcessQueue: false,
    acceptedFiles: ".svg", // Add accepted file types here
    url: "dodaj-save.php", // Your PHP file here
    init: function() {
        this.on("addedfile", function() {
            //Do something before the file gets processed.
        })
        this.on("sending", function(file, xhr, formData){
            //Do something when the file gets processed.
            //This is a good time to append additional information to the formData. It's where I add tags to make the image searchable.
            formData.append('tags', 'cat-cats-kittens-meow')
        }),
        this.on("success", function(file, xhr) {
            //Do something after the file has been successfully processed e.g. remove classes and make things go back to normal. 
        }),
        this.on("complete", function() {
            //Do something after the file has been both successfully or unsuccessfully processed.
            //This is where I remove all attached files from the input, otherwise they get processed again next time if you havent refreshed the page.
            myDropzone.removeAllFiles();   
        }),
        this.on("error", function(file, errorMessage, xhr) {
            //Do something if there is an error.
            //This is where I like to alert to the user what the error was and reload the page after. 
            alert(errorMessage);
            window.location.reload();
        })
    }
});

const uploadBtn = document.querySelector('#sbmtbutton');
uploadBtn.addEventListener('click', () => {
    const acceptedFiles = myDropzone.getAcceptedFiles();
    for (let i = 0; i < acceptedFiles.length; i++) {
        myDropzone.processFile(acceptedFiles[i])
    }
})

<?php

    $folder_name = 'path-to-your-folder/';

    if (!empty($_FILES)) {
        $temp_file = $_FILES['file']['tmp_name'];
        $filename = $_POST['tags'].'.svg'; //Grabbing those tags that I appended to formData in the AJAX request and renaming the file based on those tags. Be sure to add your image extension
        $location = $folder_name.$filename;
        move_uploaded_file($temp_file, $location);
    }

?>