Как я могу добавить поле <select> в мою форму загрузки?
Я слежу за этим сообщением в блоге 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 (не измененную версию Ника).
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;
},
});
});
});
Я думаю, что это проблема: up.settings.multipart_params === undefined при запуске этого кода:
$.extend(up.settings.multipart_params, {
'adventure': $('#adventure').val()
});