从 PHP 文件中的 dropzone.js 检索图像

Question

我正在构建一个可以上传图片的基本 HTML 表单。填写完表格后，我想用 PHP 将这些数据作为电子邮件发送。

对于图片上传，我将 dropzone.js 与我的其他表单字段结合使用。我实现的是我提交了带有 dropzone 逻辑的表单。所以我可以访问操作 php 文件中的所有表单字段。

但我还是不明白：上传的图片在哪里？如何在 PHP 文件中检索此信息？我想向您展示我的代码：

HTML

<section id="form-section" class="container">
    <form method="POST" action="inc/sendmail.php" id="home-form" enctype="multipart/form-data">
        <!-- Part "Name und Anschrift" -->
        <h2>Name und Anschrift</h2>
        <input id="email" type="email" name="email" placeholder="E-Mail Adresse">
        <input id="firstname" type="text" name="firstname" placeholder="Vorname">
        <div id="home-dropzone" class="dropzone"></div>
        <div class="dropzone-previews"></div>
        
        <!-- Submit Button -->
        <button id="home-form-submit" type="submit" class="btn mt-2">Formular absenden</button>
        <span class="output_message d-block"></span>
    </form>
</section>

Javascript

Dropzone.options.homeDropzone = { // The camelized version of the ID of the form element

    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 100,
    autoDiscover: false,
    addRemoveLinks: true,
    maxFiles: 100,
    url: '/inc/sendmail.php',
    paramName: 'image',

    init: function () {
        var myDropzone = this;

        $('#home-form-submit').on("click", function (e) {
            // Make sure that the form isn't actually being sent.
            console.log("Formular wird abgeschickt");
            e.preventDefault();
            e.stopPropagation();
            // Formular versenden, aber vorher Bilder hochladen.
            myDropzone.processQueue();

            if (myDropzone.files == 0 || myDropzone.files == undefined) {
                /* Keine Bilder. Senden des Formulares mit AJAX */
                var form = $('#home-form');
                $.ajax({
                    url: form.attr("action"),
                    method: form.attr('method'),
                    data: form.serialize(),
                    success: function (result) {
                        console.log(result);
                        if (result == 1) {
                            $('.output_message').text('Ihre Nachricht wurde erfolgreich versendet. Vielen Dank.');
                        } else {
                            $('.output_message').text('Leider ist beim Versenden Ihrer Nachricht etwas schief gelaufen.');
                        }
                    }
                });
            }
        });

        // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
        // of the sending event because uploadMultiple is set to true.
        this.on("sendingmultiple", function (data, xhr, formData) {
            $("form").find("input").each(function () {
                formData.append($(this).attr("name"), $(this).val());
            });
            formData.append("image", data);
            // Gets triggered when the form is actually being sent.
            // Hide the success button or the complete form.
        });
        this.on("successmultiple", function (files, response) {
            console.log(response);
            // Gets triggered when the files have successfully been sent.
            // Redirect user or notify of success.
        });
        this.on("errormultiple", function (files, response) {
            // Gets triggered when there was an error sending the files.
            // Maybe show form again, and notify user of error
        });
    }

}

PHP

<?php

echo print_r($_POST);

if (isset($_POST['email'])) {
    $email = $_REQUEST['email'];
    $firstname = $_REQUEST['firstname'];
    $images = $_REQUEST['image'];

    // E-Mail generieren
    $to      = 'email@email.com';
    $subject = 'the subject';
    $message = 'Bilder: '. $images .'';
    $headers = 'From: '. $email .'' . "\r\n" .
        'Reply-To: email@email.com' . "\r\n" .
        'X-Mailer: PHP/' . phpversion();

    if (mail($to, $subject, $message, $headers)) {
        echo json_encode(1);
    } else {
        echo json_encode(0);
    }
}

formData.append("image", data); 是最佳实践吗？这是正确的方法吗？或者你怎么看？

Answer 1

附加到 POST 请求的文件将出现在 the $_FILES superglobal 中。请确保按照the PHP docs on handling file uploads 安全处理此类附件。