Как я могу добавить поле <select>в свою форму загрузки?

Question

Я слежу за этим сообщением в блоге http://blog.notdot.net/2010/04/Implementing-a-dropbox-service-with-the-Blobstore-API-part-3-Multiple-upload-support, в котором подробно описано, как использовать plupload с Google Appengine и API-интерфейсом Blobstore. Мне интересно, как добавить настраиваемое поле для загрузки. Я изменил тип enc на multipart / form-data

<form method="POST" enctype="multipart/form-data">
    <select id="adventure" name="adventure">
        <option value = "collection-A">Collection A</option>
        <option value = "collection-A">Collection B</option>
    </select>


    <div id="html5_uploader">
        <p>You browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.</p>
    </div>
</form>

После прочтения о multipart, не работающей в документах с браузерами webkit (я нахожусь на chrome), я решил использовать версию на основе флэш, а не html5, с которой я начал. Используя различные примеры и обсуждения на этом форуме, я собрал следующее.

<script type="text/javascript">
 $(function() {
    uploader = $("#html5_uploader").pluploadQueue({
        // General settings
        runtimes : 'html5',
        max_file_size : '10mb',
        chunk_size : '1mb',
        multipart : true,
        unique_names : true,
         // Flash settings
        flash_swf_url : '/static/plupload/plupload.flash.swf'
    }).pluploadQueue();
    uploader.bind('BeforeUpload', function (up, file) 
    {
        $.extend(up.settings.multipart_params, {
        'adventure': $('#adventure').val()
        });
    });
    uploader.bind('UploadFile', function(up, file) {
        $.ajax({
            url: '/generate_upload_url',
            async: false,
            success: function(data) {
              up.settings.url = data;
            },
        });
    });
})
</script>

Все работает на стороне загрузки файла, однако опции выбора полей не отправляются и:

self.request.get("adventure") 

не берет ничего на стороне сервера. Я использую самую последнюю версию plupload (не измененную версию Ника).

Answer 1

Я думаю, что это проблема: up.settings.multipart_params === undefined при запуске этого кода:

$.extend(up.settings.multipart_params, {
    'adventure': $('#adventure').val()
});

Answer 2

Так что после некоторой борьбы с этим я переключился обратно на версию html5 и вместо использования BeforeUpload я теперь «жестко закодировал» значение в, но это работает для моей реализации.

var adventure_name = $('#adventure').val();
$('#adventure').change(function(){
    adventure_name = $('#adventure').val();
});
// Setup html5 version
 $(function() {
    uploader = $("#html5_uploader").pluploadQueue({
        // General settings
        runtimes : 'html5',
        max_file_size : '10mb',
        url : '{{ upload_url }}',
        multipart : true,
        multipart_params : {'adventure': adventure_name},
        unique_names : true,
         // Flash settings
    }).pluploadQueue();
    uploader.bind('UploadFile', function(up, file) 
    {
        $.ajax({
            url: '/generate_upload_url',
            async: false,
            success: function(data) {
              up.settings.url = data;
            },
        });
    });
});