단일 드롭 다운 값을 Blueimp 업 로더에 추가

Question

이것은 단지 나를 괴롭 히고 있습니다. 이 시나리오는 사진 카테고리에 드롭 다운 상자를 추가 한 것으로,이 값은 데이터베이스의 모든 사진 업로드에 적용됩니다. 선택 태그는 자바 템플릿이 아닌 BlueImp 업 로더의 form 태그 안에 있습니다.

추가 데이터를 추가하기 위해 GitHub에서 예제를 시도했지만 "data.formdata"가 직렬화되면 바인딩되지 않은 것처럼 보입니다. 나는 여기에 많은 게시물을 읽고, 인기있는 주제 인 것 같지만, 모두 나를 위해 실패했습니다. -이 아닌 값을 얻을

가 handle_form_data 기능에> 카테고리 = $ _POST [ 'PhotoCat를'] 파일 - 사용하여 시도 : 여기

내가 드롭 다운의 ID가 "PhotoCat"입니다, 지금까지 시도한 것입니다 "@"및 $ _Request ("@"포함/제외)로 시도했습니다.

DB에 데이터를 쓰는 기능에서 $ _Post [ 'PhotoCat']을 사용해 보았습니다 - 값이 없습니다.

파일 -> 범주에 값을 하드 코딩하면 작동하도록 할 수 있습니다.

그래서 문제가되는 것 같습니다. 게시물 데이터를 가져 오는 올바른 위치에 있지 않습니다.

도움이 될만한 코드는 게시 하겠지만 코드 문제는 아니라고 생각하지만 대신 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); require ('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">&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

나는 작동하지만 더 나은 방법이있는 것처럼 보입니다. 코드 예제가 더럽지 만 테스트를 위해 작동합니다. 카테고리 변경, DB 쿼리 및 범주 별 필터링과 같이 아직 갈 길이 멀지 않은 몇 가지 단점이 있지만 그렇게 나쁘지는 않습니다. 나는 통과하고 입력을 변경하는 함수에 onchange를 추가

{% 
var ListObj = document.getElementById("PhotoCat"); 
var Cat = ListObj.options[ListObj.selectedIndex].value; 

%} 
<input name="Category[]" class="form-control" hidden value="{%=Cat%}"> 

을 내 선택 태그 :

은 내가 한 일은 몇 가지 코드와 함께 업로드 템플릿 영역에 숨겨진 입력 필드를 추가했다 전지.

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

긴 시간에 모범을 따를 수 있지만. 템플릿 양식의 숨겨진 필드를 추가하기 만하면됩니다. 업 로더 양식에 실제 선택을 유지하고 제출하십시오. formData :는 필요하지 않습니다. 게시자 매개 변수는 업 로더 양식 선택의 이름과 함께 사용할 수 있습니다.