Question

我可以使用Fine Uploader轻松上传图像，但我无法弄清楚如何同时将其他表单数据传递到端点以及如何处理数据。

我希望在提交表单后制作一个将用户重定向到其他位置的表单。到目前为止，我正在使用Fine uploader文档示例 - 但不能使它们正常工作。

如果我尝试写入endpoint.php中的磁盘$ _POST内容，则会导致图片上传崩溃。如果我上传图片并提交表单，我会收到来自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>

这是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");
}



?>

Answer 1

我自己找到了答案。要使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任何部分的任何错误都可能导致错误消息，即使上传成功也是如此。这就是我所学到的。

Answer 2

表单中的所有数据都会毫无问题地传递给您的处理程序。但是，您的服务器没有使用有效的JSON字符串进行响应。看起来你还没有读到你所包含的PHP文件顶部的注释。你缺少一个handler.php文件，对于初学者来说。

如果您想在上传成功完成后将用户重定向到新页面，请在服务器响应中返回包含该URL的属性，并在onComplete回调处理程序中重定向该用户。

例如：

callbacks: {
    onComplete: function(id, name, response) {
        if (response.success) {
            location.href = response.newUrl;
        }
    }
}

如何使用Fine Uploader传递表单数据？

2 个答案: