Question

这只是让我疯了。情况就是这样，我添加了一个下拉框，对于照片类别，此值将应用于数据库中的所有照片上传。 select标签位于BlueImp上传器的表单标签内，不在java模板中。

我在GitHub上尝试了一个例子来添加额外的数据，当＆＃34; data.formdata＆＃34;时，它似乎没有绑定。被序列化。我在这里阅读了很多关于SO的帖子，似乎是一个热门话题，但所有那些对我来说都失败了。

以下是我到目前为止所尝试的内容，下拉列表的ID是＆＃34; PhotoCat＆＃34;：

尝试在handle_form_data函数中使用file-＆gt; Category = $ _Post [＆＃39; PhotoCat＆＃39;] - 不从post获取值，然后尝试使用＆＃34; @＆＃34;和$ _Request，有和没有＆＃34; @＆＃34;。

在数据写入数据库的函数中使用$ _Post [＆＃39; PhotoCat＆＃39;]尝试 - 没有值。

如果我将值硬编码到file-＆gt; Category。

，我可以让它工作

所以似乎问题是，我没有找到正确的位置去抓取帖子数据。

我会发布代码，如果这会有所帮助，但我认为这不是代码问题，而是我可以在哪里抓取并使用Dropdown值。

谢谢，

戴夫

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）; 要求（＆＃39; UploadHandler.php＆＃39）;

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">&nbsp;</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>

Answer 1

我有它的工作，但似乎会有更好的方法。代码示例很脏，但适用于测试。还有一些问题尚待解决，例如类别更改时，查询数据库以及按类别过滤，但这并不算太糟糕。

我所做的是在上传模板区域添加一个隐藏的输入字段，以及一些编码：

 {%
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

上的示例进行操作

Answer 2

很长一段时间，但是，

令人惊讶的是，我们不需要添加一个on change事件。只需添加模板表单中的隐藏字段即可。保持上传者表单中的实际选择并提交，不需要formData：。 post params将以您的上传者表格名称选择。

向Blueimp Uploader添加单下拉值

2 个答案: