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

Question

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

我想做什么 - 在上传图片并填写所有输入后，为每张上传的图片获取 link在此会话中，作为 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);

    }
?>

Just to explain the above code, once an image(s) is selected/drag-and-dorpped, upload.php uploads the images to http://example.com/img/uploads/ folder.

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

我正在尝试单击 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>

Answer 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;

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

Dropzone JS: How to get URLs of each image to pass as separate AJAX request after uploading process?

php

ajax

jquery

file-upload

dropzone.js