Как передать данные формы с помощью Fine Uploader?

Я могу легко загружать изображения с помощью Fine Uploader, но я не могу понять, как я могу одновременно передавать другие данные формы в конечную точку и как обрабатывать данные.

Я хотел бы создать форму, которая перенаправляет пользователя в другое место после отправки формы. Пока я играю с примерами документации Fine uploader, но тоже не могу заставить их работать.

Если я попытаюсь записать на диск содержимое $_POST в endpoint.php, это приведет к сбою загрузки изображения. Если я загружаю изображения и отправляю форму, я получаю сообщения об ошибках от endpoint.php.

Вы можете запустить его здесь: http://www.digioppikirja.fi/v3/fineuploader.html

Вот HTML:

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://www.digioppikirja.fi/v3/custom.fineuploader-4.4.0/custom.fineuploader-4.4.0.min.js"></script>
    <script type="text/template" id="qq-template">
        <div class="qq-uploader-selector qq-uploader">
            <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                <span>Drop files here to upload</span>
            </div>
            <div class="qq-upload-button-selector qq-upload-button">
                <div>Select Files</div>
            </div>
            <span class="qq-drop-processing-selector qq-drop-processing">
                <span>Processing dropped files...</span>
                <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
            </span>
            <ul class="qq-upload-list-selector qq-upload-list">
                <li>
                    <div class="qq-progress-bar-container-selector">
                        <div class="qq-progress-bar-selector qq-progress-bar"></div>
                    </div>
                    <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                    <span class="qq-upload-file-selector qq-upload-file"></span>
                    <span class="qq-upload-size-selector qq-upload-size"></span>
                    <a class="qq-upload-cancel-selector qq-upload-cancel" href="#">Cancel</a>
                    <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
                </li>
            </ul>
        </div>
    </script>
<head>

<body>
    <form action="endpoint.php" method="post" enctype="multipart/form-data" id="qq-form">
        <label>Enter your name</label>
        <input type="text" name="user_name" required>
        <label>Enter your email</label>
        <input type="email" name="user_email" required>
        <input type="submit" value="Done">
    </form>

    <div id="my-uploader"></div>

    <script>
        $("#my-uploader").fineUploader({

            form: {
                        interceptSubmit: false,
                        autoUpload: true,
                    },


            });
    </script>
</body>

Here's PHP:

 <?php

/**
 * PHP Server-Side Example for Fine Uploader (traditional endpoint handler).
 * Maintained by Widen Enterprises.
 *
 * This example:
 *  - handles chunked and non-chunked requests
 *  - assumes all upload requests are multipart encoded
 *
 *
 * Follow these steps to get up and running with Fine Uploader in a PHP environment:
 *
 * 1. Setup your client-side code, as documented on http://docs.fineuploader.com.
 *
 * 2. Copy this file and handler.php to your server.
 *
 * 3. Ensure your php.ini file contains appropriate values for
 *    max_input_time, upload_max_filesize and post_max_size.
 *
 * 4. Ensure your "chunks" and "files" folders exist and are writable.
 *    "chunks" is only needed if you have enabled the chunking feature client-side.
 */

// Include the upload handler class
require_once "handler.php";
require_once "../cfg/digikirjat.cfg.php";

$uploader = new UploadHandler();

// Specify the list of valid extensions, ex. array("jpeg", "xml", "bmp")
$uploader->allowedExtensions = array(); // all files types allowed by default

// Specify max file size in bytes.
$uploader->sizeLimit = 10 * 1024 * 1024; // default is 10 MiB

// Specify the input name set in the javascript.
$uploader->inputName = "qqfile"; // matches Fine Uploader's default inputName value by default

// If you want to use the chunking/resume feature, specify the folder to temporarily save parts.
$uploader->chunksFolder = "chunks";

$method = $_SERVER["REQUEST_METHOD"];
if ($method == "POST") {
    header("Content-Type: text/plain");

    // Call handleUpload() with the name of the folder, relative to PHP's getcwd()
    $result = $uploader->handleUpload($_dirs['temp'].'/upload/');

    // To return a name used for uploaded file you can use the following line.
    $result["uploadName"] = $uploader->getUploadName();


    echo json_encode($result);

    // THIS MAKES UPLOADS CRASH:
    $a = print_($_POST, true);
    file_put_contents($_dirs['temp'].'/upload/post.txt', $a);

}
else {
    header("HTTP/1.0 405 Method Not Allowed");
}



?>

person Tuomo B    schedule 08.05.2014    source источник


Ответы (2)


Я нашел ответ сам. Чтобы Fine Uploader работал с PHP-формами, сделайте следующее:

  • Установить form: { interceptSubmit: true, autoUpload: false,}, Теперь пользователь может заполнять текстовые поля. Когда пользователь нажимает кнопку отправки, Fine Uploader начинает загрузку файла.

  • Установите callbacks: { onComplete: function(id, name, response) { if (response.success) { location.href = 'YOUR_URL_HERE'; } } } Таким образом вы можете перезагрузить страницу или сделать что-то подобное, что обычно происходит при отправке формы. Конечно, вы также можете перезагрузить контент с помощью Javascript.

  • Endpoint.php: Содержимое формы проще всего найти из $_REQUEST.

  • Любая ошибка в любой части endpoint.php, вероятно, вызовет сообщение об ошибке при загрузке файла, даже если загрузка будет успешной. Вот чему я научился.
person Tuomo B    schedule 09.05.2014
comment
Возможно, вам также следует упомянуть установку идентификатора формы на qq-form, поскольку это идентификатор по умолчанию, который ищет FineUploader. Но вы также можете просто указать идентификатор своей формы, что приведет к умолчанию для interceptSubmit true и autoUpload false. Поэтому добавьте следующее в вашу форму FineUploader...: { element: someTestFormId }. См. также stackoverflow.com/a/41492246/4975760. - person Dacker; 06.01.2017

Все данные в вашей форме передаются вашему обработчику без проблем. Однако ваш сервер не отвечает действительной строкой JSON. Похоже, вы не читали комментарии вверху файла PHP, который вы включили. Для начала вам не хватает файла handler.php.

Если вы хотите сделать что-то вроде перенаправления пользователя на новую страницу после успешного завершения загрузки, верните свойство в ответе вашего сервера, которое включает URL-адрес, и перенаправьте пользователя в обработчике обратного вызова onComplete.

Например:

callbacks: {
    onComplete: function(id, name, response) {
        if (response.success) {
            location.href = response.newUrl;
        }
    }
}
person Ray Nicholus    schedule 08.05.2014
comment
Хммм... Я читал комментарии вверху php-файла, и в том же каталоге есть handler.php. Тем не менее сервер не отвечает должным образом. - person Tuomo B; 09.05.2014
comment
Тогда есть некоторая проблема с конфигурацией вашего сервера, так как запрос не обрабатывается должным образом. - person Ray Nicholus; 09.05.2014
comment
Похоже, вы исправили это, так как загрузка прошла успешно с моей последней попытки. - person Ray Nicholus; 09.05.2014
comment
Да! К счастью, я нашел способ заставить его работать так, как я хотел. - person Tuomo B; 09.05.2014