0

我有一个包含一些字段（名字、姓氏和个人资料图片）的表单，如下所示：

<form>
    <div class="row">
        <div class="col-lg-6">
            <label class="control-label">First Name:</label>
            <input class="form-control" type="text" placeholder="Enter first name.." id="firstName">

        </div>
        <div class="form-group col-lg-6">
            <label class="control-label">Last Name:</label>
            <input class="form-control" type="text" placeholder="Enter last name.." id="lastName"> 
        </div>
    </div> <!-- /row -->
    <div class="row">  
        <div class="form-group col-lg-6">
            <label class="control-label">profile picture:</label>
            <div class="dropzone dropzone-previews" id="profilbildDropzone">
                <div class="fallback">
                    <input name="file" type="file" multiple="multiple">
                </div>
            </div>
        </div>
    </div> <!-- /row -->
    <hr />
    <div class="form-action">
        <button type="button" class="btn btn-primary waves-effect waves-light" id="sweet-ajax">Submit Data</button>
    </div>
</form>

当用户单击提交数据时，我会调用一个 Sweet-Alert 对话框，询问用户是否确定他尝试的操作。如果他单击“是”，我想通过 AJAX 将数据提交到一个 PHP 脚本，该脚本完成所有其余工作（将图像存储在服务器上，将数据保存在我的数据库中等等）：

<script type="text/javascript">
    SweetAlert.prototype.init = function () {
        //Ajax
        $('#sweet-ajax').click(function () {
            swal({
                title: "Sure?", 
                text: "Clicking on yes submits the data!", 
                type: "warning",
                showCancelButton: true,
                closeOnConfirm: false,
                confirmButtonText: "Yes!",
                cancelButtonText: "Cancel",

                showLoaderOnConfirm: true,
                confirmButtonClass: 'btn btn-success',
                cancelButtonClass: 'btn btn-danger m-l-10',
                preConfirm: function(givenData){
                    return new Promise(function(resolve, reject) {
                        setTimeout(function(){
                            inputNameFirst     = document.getElementById("firstName").value;
                            inputNameLast      = document.getElementById("lastName").value;

                            resolve()

                        }, 2000)
                    })
                },
                allowOutsideClick: false
            }).then(function(givenData){
                $.ajax({
                            type: "post",
                            url: "../assets/php/addUser.php",
                            data: {done: "success", fN: inputNameFirst, ln: inputNameLast},
                            dataType: 'JSON',
                            success: function(data) {
                                if(data.status === 'success'){
                                    swal({
                                        type: 'success',
                                        title: 'Good job!',
                                        html: 'all saved now!'
                                    })
                                }else if(data.status === 'error'){
                                    swal({ 
                                        type: 'error',
                                        title: 'Oh No!!',
                                        html: 'Nope sorry, there was an error: <br /><pre>'+ JSON.stringify(data) + '</pre>'
                                    })
                                }
                            }
                        })

            }, function(dismiss) {
                  // dismiss can be 'overlay', 'cancel', 'close', 'esc', 'timer'
                  if (dismiss === 'cancel') {
                    swal(
                      'Got you!',
                      'Nothing changed. Good luck.',
                      'error'
                    )
                  }
              })

            });
     },    
        //init
        $.SweetAlert = new SweetAlert, $.SweetAlert.Constructor = SweetAlert
    }(window.jQuery),

    //initializing
    function ($) {
        "use strict";
        $.SweetAlert.init()
    }(window.jQuery);
</script>

我还在我的网站上设置了 DropZone，这样我的表单中也可以包含可选字段（来自这里）：

jQuery(document).ready(function() {

    $("div#profilbildDropzone").dropzone({
        //store images in this directory
        url: "../assets/images/uploads",
        dictDefaultMessage: "Drop image here or click.",
        autoProcessQueue: false,
        maxFiles: 1,
        uploadMultiple: true,
        parallelUploads: 100,

        // The setting up of the dropzone
        init: function() {
            var myDropzone = this;  

            // First change the button to actually tell Dropzone to process the queue.
            this.element.querySelector("button#sweet-ajax").addEventListener("click", function(e) {
                // Make sure that the form isn't actually being sent.
                e.preventDefault();
                e.stopPropagation();
                myDropzone.processQueue();
            });

            // 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() {
                // Gets triggered when the form is actually being sent.
                // Hide the success button or the complete form.
            });
            this.on("successmultiple", function(files, 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 脚本。在这一行：

this.on("sendingmultiple", function() {
      // Gets triggered when the form is actually being sent.
      // Hide the success button or the complete form.
});

我应该上传图片还是什么？我可以在我的 SWAL 函数中调用这个函数，或者将数据传递给我的 SWAL 函数，然后将它发送到 PHP 脚本吗？可悲的是，我还没有找到任何有用的示例，可以清楚地提示我如何解决这个特定问题。

4

1 回答 1

0

您没有编写逻辑通过 ajax 将数据发送到服务器端（即 PHP）。单击提交按钮时，您将告诉 Dropzone.js 到processQueue()。但这本身不会通过 ajax 将数据发布到服务器。

在发送多个事件时，您需要获取表单数据并将其分配给formObject，然后 DropzoneJS 将负责将数据沿文件/图像发布到 PHP 。

init: function() {
    var myDropzone = this;  

    // First change the button to actually tell Dropzone to process the queue.
    this.element.querySelector("button#sweet-ajax").addEventListener("click", function(e) {
        // Make sure that the form isn't actually being sent.
        e.preventDefault();
        e.stopPropagation();
        myDropzone.processQueue();
    });

    // 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() {
        // Append all form inputs to the formData Dropzone will POST
        var data = $form.serializeArray();
        $.each(data, function (key, el) {
            formData.append(el.name, el.value);
        });
    });
}

接下来在 PHP 服务器端获取发布的数据和文件/图像，就像这样。

<?php 
    //get form data
    echo '<pre>';print_r($_POST);echo '</pre>';
    //get posted files
    echo '<pre>';print_r($_FILES);echo '</pre>';
    exit;

接下来编写您的逻辑上传文件/图像，并使用发布的数据更新数据库。

另请查看我已经编写了有关如何通过 ajax 使用 DropzoneJS 和 PHP 在按钮单击时上传带有表单数据的图像的详细教程。

使用带有普通表单字段的 Dropzone.js 上传 Ajax 图像按钮单击使用 PHP

于 2018-08-05T12:56:02.260 回答