Javascript 自定义表单和DropZoneJS

我试着用dropzone搜索我的上传功能，以使用我自己的自定义表单。不幸的是，stackoverflow和另一边的其他线程并没有给我太多帮助。因此，也许任何人都可以了解真正的基础知识，帮助我理解这一点

我的问题是在按下提交按钮时从输入字段获取信息。图像确实像它应该的那样上传并进入文件夹，但我也不想从输入字段获得信息，所以我可以稍后将这些信息推送到数据库。目前，我只是尝试从输入字段获取信息，并用PHP将其写出，但我没有得到变量的任何信息。有人能帮我理解吗

这是我的密码：

HTML和JavaScript代码

<!-- Innholdet på siden -->
<h1 class="page-header">Last opp bilder</h1>

<pre>
    <form action="" method="post" class="dropzone" id="myForm" enctype="multipart/form-data">
        <!-- Drag and drop felt med knapp som henter opp uforsker -->
        <h4>Slipp bildene her eller <span class="btn btn-success fileinput-button dz-clickable"/> trykk her for å velge bilder!</h4>
        <input type="text" id="photographer" name="photographer">
    </form>
</pre>

<div class="table table-striped files" id="previews">
    <div id="template" class="file-row" style="border: solid 1px #CCCCCC; position: relative; top: 10px; padding: 10px; background-color: #f9f9f9">
        <!-- This is used as the file preview template -->
        <!--Div-tag som styler hele thumbnail-preview visningen-->
        <span class="preview" style="float: left;"><img data-dz-thumbnail/></span>
        <!--div-tag som styler 'name' til filen som lastes opp-->
        <p class="name" style="float: left; margin: 10px 50px 0 50px;" data-dz-name></p>
        <!-- Henter ut filstørrelsen på bilde -->
        <p class="size" style="float: left; margin-top: 10px;" data-dz-size></p>
        <!--Knapp som sletter enkeltbilde i køen-->
        <button style="margin: 10px 0 0 70px;" data-dz-remove id="cancel2" class="btn btn-warning cancel">
            <i class="glyphicon glyphicon-ban-circle"></i>
            Cancel
        </button>
        <br>
        <!-- Selve progressbaren-->
        <div class="progress" style="float: left; margin-left: 50px; width: 20%;">
            <div class="progress-bar progress-bar-success" id="test" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" data-dz-uploadprogress></div>
        </div>
        <strong class="error text-danger" data-dz-errormessage></strong>
        <br style="clear: both;">
    </div>
</div>

<div id="actions" class="row">
    <!-- Knappene -->
    <!-- Legg til filer -->
    <span class="btn btn-success fileinput-button dz-clickable"/>
    <i class="glyphicon glyphicon-plus"></i>
    <span>Legg til filer</span>
    </span>
    <!-- Denne knappen starter selve opplastningsfunksjonen-->
    <button type="submit" name="submit" id="upload" class="btn btn-primary start">
        <i class="glyphicon glyphicon-upload"></i>
        Last opp
    </button>

    <!-- Denne knappen fjerner elementer i køen-->
    <button data-dz-remove id="cancel" class="btn btn-warning cancel">
        <i class="glyphicon glyphicon-ban-circle"></i>
        Cancel
    </button>
</div>

<script>
    // Deklarerer variabel som plukker opp div-taggen template som skal brukes i visning av opplastende filer
    var previewNode = document.querySelector("div#template");
    previewNode.id = "";

    // Ting som jeg ikke helt forstår
    var previewTemplate = previewNode.parentNode.innerHTML;
    previewNode.parentNode.removeChild(previewNode);

    //Sørger for at ikke queue'n blir kjørt automatisk før 'go'-knappen er trykket
    Dropzone.autoDiscover = false;
    //Sperre som gjør at opplastningsfunksjonen kun tar imot bilder og ikke dokumenter.. Btw .svg filer fungerer også
    var acceptedFileTypes = "image/*";

    //Deklarerer selve dropzonen og definerer noen variabler fra bibiloteket til dropzone
    var myDropzone = new Dropzone(document.body, {
        url: 'inc/uploads.php',
        autoProcessQueue: false,
        paramName: 'file',
        maxFiles:10,
        previewTemplate: previewTemplate,
        previewsContainer: "#previews",
        headers: {"MyAppname-Service-Type": "Dropzone"},
        acceptedFiles: acceptedFileTypes,
        clickable:".fileinput-button"
    });

    //Registrerer knappentrykk og kjører kode
    $('#upload').click(function () {
        //Prosesserer køen
        myDropzone.processQueue();
        //'Success'-event som kan høres på og kjøres kode etter alle filer er akseptert
        myDropzone.on("success", function(file,responseText){
            console.log(file);
            var test = document.getElementById('erik');
            var ok = document.getElementById('ok');
            test.innerHTML = ok.value;
            var txt = document.getElementById("txt");
            txt.innerHTML = responseText;
            removeContentDelay();
        });
    });

    //Avbyrt-knapp som sletter hele køen
    $('#cancel').click(function () {
        myDropzone.removeAllFiles();
    });

    // Funksjon som setter en forsinkelse på hendelsen removeAllFiles
    function removeContentDelay() {
        timeoutID = window.setTimeout(removeAllFilesAfterDelay,2000);
    }
    // Fuksjon som tømmer køen etter perdefinert tid i funksjonen removeContentDelay
    function removeAllFilesAfterDelay(responseText){
        myDropzone.removeAllFiles();
    }
</script>

最后一个船舱
拖鞋比尔登她的埃勒试着把她弄脏！


取消





Legg-til锉刀
最后一次机会
取消
//Deklarer variabel som plukker opp div taggen模板som skal brukes i visning av opplastende文件管理器
var previewNode=document.querySelector（“div#template”）；
previewNode.id=“”；
//Ting som jeg ikke helt forstår
var previewTemplate=previewNode.parentNode.innerHTML；
previewNode.parentNode.removeChild（previewNode）；
//在ikke排队等候的Sørger'n blir kjørt automatisk før'go'-knappen er trykket
Dropzone.autoDiscover=false；
//斯佩雷·索姆·格约尔（Sperre som gjør）在北京奥运会开幕式上致辞。。顺便说一句，svg文件管理器风机også
var acceptedFileTypes=“image/*”；
//DEKlarer选择dropzone或定义dropzone之前的可变区域
var myDropzone=新的Dropzone（document.body{
url:'inc/uploads.php'，
自动处理队列：false，
paramName:'文件'，
最大文件数：10，
预览模板：预览模板，
PreviewContainer:“#预览”，
标题：{“MyAppname服务类型”：“Dropzone”}，
acceptedFiles:AcceptedFileType，
可单击：“.fileinput按钮”
});
//注册人克纳彭特里克·奥格·科德
$（'#上载'）。单击（函数（）{
//普罗塞雷尔·科恩
myDropzone.processQueue（）；
//“成功”-事件的主题是“成功”和“成功”
myDropzone.on（“成功”，函数（文件，responseText）{
console.log（文件）；
var test=document.getElementById（'erik'）；
var ok=document.getElementById（'ok'）；
test.innerHTML=ok.value；
var txt=document.getElementById（“txt”）；
txt.innerHTML=响应文本；
removeContentDelay（）；
});
});
//阿夫伯特·克纳普·索姆斯莱特·赫勒·科恩
$（'#取消'）。单击（函数（）{
myDropzone.removeAllFiles（）；
});
//Funksjon som setter en for Sinkelse påhendelsen删除所有文件
函数removeContentDelay（）{
timeoutID=window.setTimeout（removeAllFilesAfterDelay，2000）；
}
//福建省的som tømmer køen better perdefinert tid i funksjonen removeContentDelay
函数removeAllFilesAfterDelay（responseText）{
myDropzone.removeAllFiles（）；
}

#PHP代码

myDropzone.on("sending", function (file, xhr, formData) {
   var titleVal = file.previewElement.querySelector(".title input").value;
   formData.append("Title", titleVal);
}

---

我想您应该在dropzone中使用“发送”事件。这是我正在做的一个应用程序中的一段代码：

---

让它在PHP端使用以下代码：

---

然后您可以像往常一样使用php来获取php文件中的值？经过一些尝试和失败后，它终于可以工作了！非常感谢你！：）

myDropzone.on("sending", function (file, xhr, formData) {
   var titleVal = file.previewElement.querySelector(".title input").value;
   formData.append("Title", titleVal);
}

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{
    echo "RECEIVED ON SERVER: \n";
    echo "FILES: \n";

    print_r($_FILES);
    echo "\$_POST: fra php filen \n";
    print_r($_POST);
}


$photographer = ($_POST['photographer']);