javascript - 自定义表单和 DropZoneJS

Question

我尝试通过 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>

#PHP - 代码

<?php

$test = $_REQUEST["photographer"];
echo "<h1>$test</h1>";

$uploaddir = 'uploads/';
$uploadfile = $uploaddir . basename($_FILES['file']['name']);

if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile)) {
    echo "File is valid, and was successfully uploaded.\n HEEEI";
} else {
    echo "Possible file uploads attack!\n";
}

echo '<pre>';
echo 'Here is some more debugging info:';
print_r($_FILES);

    echo "</pre>";
?>

Answer 1

我想你想在 dropzone 中使用“发送”事件。这是我正在执行此操作的应用程序中的一些代码:

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