使用 Dropzone.js 和 PHP 上传后如何访问文件

Question

我想访问通过 dropzone.js (v5) 和 PHP 上传到服务器后的文件，即我想检索文件 URL。我怎样才能得到它？

form.php:

<form action="upload.php" class="dropzone" enctype="multipart/form-data">
    <div class="fallback">
        <input name="file" type="file" multiple />
    </div>
</form>

<script src="/js/dropzone.js"></script>
<script>
    Dropzone.autoDiscover = false;
    $('.dropzone').dropzone({
        init: function () {
            this.on("complete", function (file) {
                runthisfunction();
            }) // end on complete
        }
    }); 
</script>

upload.php:

<?php
if (!empty($_FILES)) {
    $random = randomString(18);
    $tempFile = $_FILES['file']['tmp_name'];          
    $name = $_FILES['file']['name'];
    $fileExt = strtolower(substr(basename($name), strrpos(basename($name), ".") + 1)); 
    $newname = $random.'.'.$fileExt;
    move_uploaded_file($tempFile,"images/$newname");
} // end if files not empty
?>

我尝试通过文件对象检索上传的文件URL，但没有成功：

this.on("complete", function (file) {
    console.log(file);
    console.log(file.dataURL);
    console.log(file.name);
}) // end on complete

由于文件是使用 PHP 上传并在 upload.php 中重命名的，我相信我需要将此文件名 "POST" 以某种方式添加到另一个文件，然后将其取回。我该怎么做？

Answer 1

您关于需要从服务器取回文件名的直觉是正确的。有一个 simple example in the Dropzone FAQ 显示了基本思想。

1) 您的服务器必须响应上传 POST 并提供文件放置位置的详细信息 - 例如 URL、文件名、路径等。所以在您的情况下，在在 PHP 代码的末尾，您需要执行以下操作：

// ... rest of your PHP ...
move_uploaded_file($tempFile,"images/$newname");

// Let the browser/JS know we are sending a JSON response back.  Make sure there 
// is no output before this.
header('Content-type: application/json');
echo json_encode([
    'status' => 'OK',  // Not required, but maybe useful
    'image'  => "images/$newname",
]);

2) 在你的 JS 中，你需要接受来自服务器的响应，并用它做一些事情。 Dropzone 文档显示 the success event:

The file has been uploaded successfully. Gets the server response as second argument.

这听起来就是我们需要的。因此，将 complete 处理程序替换为 success 的处理程序，并添加第二个参数：

this.on("success", function (file, response) {
    console.dir(response);
    // response.image will be the relative path to your uploaded image.
    // You could also use response.status to check everything went OK,
    // maybe show an error msg from the server if not.
});

我在上面链接的 Dropzone FAQ 项目显示使用 .emit() 方法来显示图像，我对此不熟悉，文档中似乎也没有描述。试一试，也许它行得通并且适合您的需要。如果没有，你可以这样做：

// Maybe you have an <img class='thumbnail'> in your HTML, ready to show the upload
$('.thumbnail').attr('src', response.image).fadeIn();

使用 Dropzone.js 和 PHP 上传后如何访问文件

How to access a file after it was uploaded with Dropzone.js and PHP

php

ajax

dropzone.js

dropzone