Как получить доступ к файлу после его загрузки с Dropzone. js и PHP - PullRequest
Новая
       12

Как получить доступ к файлу после его загрузки с Dropzone. js и PHP

0 голосов
/ 19 февраля 2020

Я хотел бы получить доступ к файлу после его загрузки на сервер через dropzone. js (v5) и PHP, т.е. я хочу получить URL файла. Как я могу получить его?

форма. 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>

загрузить. 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, я считаю, что мне нужно каким-то образом "ПОСТАВИТЬ" это имя файла в другой файл а затем вернуть его обратно. Как я могу это сделать?

1 Ответ

2 голосов
/ 19 февраля 2020

Ваша интуиция о необходимости вернуть имя файла с сервера верна. Существует простой пример в FAQ Dropzone FAQ , который показывает основную идею c.

1) Ваш сервер должен ответить на POST загрузки с подробной информацией о том, куда он поместил файл - например, URL, имя файла, путь и т. д. c. Таким образом, в вашем случае, в конце вашего 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 показывают для события success :

Файл успешно загружен. Получает ответ сервера в качестве второго аргумента.

Звучит так, как нам нужно. Поэтому замените ваш обработчик 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, на который я ссылался выше, показывает использование метода .emit() для отображения изображения. Я не знаком с этим, и это, кажется, не описано в документации. Попробуйте, может быть, это работает и соответствует вашим потребностям. Если нет, вы можете сделать что-то вроде: 

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