Dropzone JS：如何在上传过程后获取每个图像的 URL 作为单独的 AJAX 请求传递？答案

【问题标题】：Dropzone JS: How to get URLs of each image to pass as separate AJAX request after uploading process?Dropzone JS：如何在上传过程后获取每个图像的 URL 作为单独的 AJAX 请求传递？
【发布时间】：2017-08-17 20:12:30
【问题描述】：

我将停止使用由 http://www.dropzonejs.com/ 提供的 Dropzone.js 资源

我正在尝试做的事情 - 上传图片并填写所有输入后，获取在此会话中上传的每张图片的链接，以传递到POST 类型的 AJAX 请求 URL。

我的 HTML：

<div id="myForm">
    <input type="text" id="form-name" placeholder="Name">
    <input type="text" id="form-email" placeholder="Email">

    <form action="/upload-target" class="dropzone" id="myDropZone"></form>

    <button id="submit-info">submit</button>
</div>

我的 JS：

<script>  
    $("div#myDropzone").dropzone({ url: "/upload.php" },
        function() {
            console.log("Hello");
        });
</script>

图像被上传到下面 PHP 代码中提到的目录，但是上面的脚本有问题，控制台中的输出甚至没有打印出来。上传任何内容时，Hello 不会在控制台中显示。

我的upload.php：

<?php
    $ds          = DIRECTORY_SEPARATOR;

    $storeFolder = 'img/uploads';

    if (!empty($_FILES)) {

        $tempFile = $_FILES['file']['tmp_name'];          

        $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;

        $targetFile =  $targetPath. $_FILES['file']['name'];

        move_uploaded_file($tempFile,$targetFile);

    }
?>

只是为了解释上面的代码，一旦图像被选择/拖放，upload.php 将图像上传到 http://example.com/img/uploads/ 文件夹。

这里是我需要帮助的地方：

我正在尝试单击 ID 为 submit-info 的按钮，将我刚刚上传的每个图像作为字符串传递给 AJAX 请求：

<script>
    $('#submit-info').click(function() {
        var str = "name=" + $('#form-name').val()
                + "&email=" + $('#form-email').val()
                + "&images=" + /* what to put here */;

        console.log(str);

        $.ajax({
            type: "post",
            url: "sendEmail.php",
            data: str,
            dataType: "json",
            success: function (confirmation) {
                // some code here dealing with after the email is sent like hiding the form
            }
        });
    });
</script>

【问题讨论】：

标签： php jquery ajax file-upload dropzone.js

【解决方案1】：

这是一种方法：

var files = '';

if (Dropzone.forElement("#my-dropzone").files.length > 0) {
    for (var i = 0; i<Dropzone.forElement("#my-dropzone").files.length; i++) {
        if (i === (Dropzone.forElement("#my-dropzone").files.length - 1) ) {
            files += Dropzone.forElement("#my-dropzone").files[i].name;
        }
        else {
            files += Dropzone.forElement("#my-dropzone").files[i].name + '~';
        }
    }
}

上面的代码应该放在$('#submit-info').click(function() { ...里面，这样一旦点击提交按钮，我们就设置一个空字符串，检查是否有上传的文件，如果存在就连接它们。

在此示例中，文件由~ 字符分隔。因此，一旦字符串通过，您就可以像这样声明您的 str 变量：

$('#submit-info').click(function() {
    var str = "name=" + $('#form-name').val()
            + "&email=" + $('#form-email').val()
            + "&images=" + files;

【讨论】：

做到了！谢谢:)