【发布时间】：2023-04-03 00:23:02
【问题描述】：
我可以使用 Fine Uploader 轻松上传图片，但我不知道如何同时将其他表单数据传递到端点以及如何处理数据。
我想制作一个表单，在提交表单后将用户重定向到其他位置。到目前为止，我正在使用 Fine 上传器文档示例 - 但也无法让它们工作。
如果我尝试在 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");
}
?>
【问题讨论】：
标签： javascript php fine-uploader