这简直要把我逼疯了。场景是这样的，我为照片类别添加了一个下拉框，这个值应用于数据库中所有上传的照片。select标签在BlueImp上传器的form标签中，而不是在java模板中。
我已经尝试了GitHub上的例子来添加额外的数据，它似乎不是绑定当"数据。Formdata"被序列化。我在这里读了很多关于SO的帖子，似乎是一个流行的话题，但所有这些对我来说都失败了。
这是我到目前为止所尝试的，下拉列表的ID是"PhotoCat":
尝试在handle_form_data函数中使用file->Category = $_Post['PhotoCat'] -未从post中获取值，然后尝试使用"@"和$_Request，带或不带"@"。
尝试在函数中使用$_Post['PhotoCat']，其中数据写入数据库-没有值。
我可以让它工作，如果我硬编码一个值到file->Category。
所以问题似乎是，我没有击中正确的位置来抓取post数据。
我会张贴代码，如果这将有助于，但我不认为这是一个代码问题，而是我在哪里可以抓取和使用下拉值。
谢谢,戴夫
Added to Main.js
$(function () {
'use strict';
// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
url: 'server/php/'
});
// Enable iframe cross-domain access via redirect option:
$('#fileupload').fileupload(
'option',
'redirect',
window.location.href.replace(
/'/[^'/]*$/,
'/cors/result.html?%s'
)
);
$('#fileupload').fileupload({
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
url: 'server/php/',
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator && navigator.userAgent),
imageMaxWidth: 800,
imageMaxHeight: 600,
imageCrop: false // Force cropped images
});
$('#fileupload').bind('fileuploadsubmit', function (e, data) {
// The example input, doesn't have to be part of the upload form:
data.formData = {"example": 'ADDED THIS'};
});
$('#fileupload').fileupload({
url: 'server/php/'
}).on('fileuploadsubmit', function (e, data) {
data.formData += data.context.find(':input').serializeArray();
});
index.php
$options = array(
'delete_type' => 'POST',
'db_host' => DB_HOST,
'db_user' => DB_USER,
'db_pass' => DB_PASS,
'db_name' => DB_NAME,
'db_table' => 'files'
);
error_reporting(E_ALL | E_STRICT);要求("UploadHandler.php");
class CustomUploadHandler extends UploadHandler {
protected function initialize() {
$this->db = new mysqli(
$this->options['db_host'],
$this->options['db_user'],
$this->options['db_pass'],
$this->options['db_name']
);
parent::initialize();
$this->db->close();
}
protected function handle_form_data($file, $index) {
$file->title = @$_REQUEST['title'][$index];
$file->description = @$_REQUEST['description'][$index];
$file->DropD = $_REQUEST['PhotoCat'];
}
protected function handle_file_upload($uploaded_file, $name, $size, $type, $error,
$index = null, $content_range = null) {
$file = parent::handle_file_upload(
$uploaded_file, $name, $size, $type, $error, $index, $content_range
);
if (empty($file->error)) {
$sql = 'INSERT INTO `'.$this->options['db_table']
.'` (`name`, `size`, `type`, `title`, `description`)'
.' VALUES (?, ?, ?, ?, ?)';
$query = $this->db->prepare($sql);
$query->bind_param(
'sisss',
$file->name,
$file->size,
$file->type,
$file->DropD,
$file->description
);
$query->execute();
$file->id = $this->db->insert_id;
}
return $file;
}
protected function set_additional_file_properties($file) {
parent::set_additional_file_properties($file);
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
$sql = 'SELECT `id`, `type`, `title`, `description` FROM `'
.$this->options['db_table'].'` WHERE `name`=?';
$query = $this->db->prepare($sql);
$query->bind_param('s', $file->name);
$query->execute();
$query->bind_result(
$id,
$type,
$title,
$description
);
while ($query->fetch()) {
$file->id = $id;
$file->type = $type;
$file->title = $title;
$file->description = $description;
}
}
}
public function delete($print_response = true) {
$response = parent::delete(false);
foreach ($response as $name => $deleted) {
if ($deleted) {
$sql = 'DELETE FROM `'
.$this->options['db_table'].'` WHERE `name`=?';
$query = $this->db->prepare($sql);
$query->bind_param('s', $name);
$query->execute();
}
}
return $this->generate_response($response, $print_response);
}
}
$upload_handler = new CustomUploadHandler($options);
index.html (form section)
<form id="fileupload" method="POST" enctype="multipart/form-data">
<!-- Redirect browsers with JavaScript disabled to the origin page -->
<noscript><input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"></noscript>
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple>
</span>
<button type="submit" class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
<button type="button" class="btn btn-danger delete">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
<input type="checkbox" class="toggle">
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress state -->
<div class="col-lg-5 fileupload-progress fade">
<!-- The global progress bar -->
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-success" style="width:0%;"></div>
</div>
<!-- The extended global progress state -->
<div class="progress-extended"> </div>
</div>
</div>
<div>
<select id="PhotoCat" name="PhotoCat">
<option value="cat1">Cat 1</option>
<option value="cat2">Cat 2</option>
</select>
</div>
<!-- The table listing the files available for upload/download -->
<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
</form>
我有它的工作，但似乎会有一个更好的方法。代码示例很脏，但适用于测试。还有一些问题需要解决，比如当类别发生变化、查询DB和按类别进行过滤时，但这还不算太糟糕。
我所做的是在上传模板区域添加一个隐藏的输入字段，以及一些编码:
{%
var ListObj = document.getElementById("PhotoCat");
var Cat = ListObj.options[ListObj.selectedIndex].value;
%}
<input name="Category[]" class="form-control" hidden value="{%=Cat%}">
在我的select标记中，我向一个遍历并更改输入字段的函数添加了一个onchange。
function UpdateCategory()
{
var x = document.getElementsByName("PixArea[]");
var ListObj = document.getElementById("PhotoCat");
var Cat = ListObj.options[ListObj.selectedIndex].value;
for (var i = 0; i < x.length; i++) {
x[i].value = Cat;
}
}
现在你可以按照GitHub上的例子
好久不见，
令人惊讶的是，我们不需要添加一个on change事件。只需在模板表单中添加隐藏字段。在上传表单中保留实际选择并提交，不需要formData:。Post参数将与您的上传表单的名称一起使用。