如何在我的plupload表单中添加<select>字段?</select>

时间:2012-02-13 23:44:44

标签: javascript jquery google-app-engine jquery-plugins plupload

我关注此博文http://blog.notdot.net/2010/04/Implementing-a-dropbox-service-with-the-Blobstore-API-part-3-Multiple-upload-support,其中详细介绍了如何将plupload与google appengine和blobstore api配合使用。我想知道如何在上传中添加自定义字段。我已将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>

在阅读了关于使用webkit浏览器的文档中没有工作的多部分之后(我在chrome上)我决定使用基于flash的版本而不是我开始使用的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(不是Nick的改版)。

2 个答案:

答案 0 :(得分:5)

所以经过一段时间的努力,我转回到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;
            },
        });
    });
});

答案 1 :(得分:5)

我认为这是问题所在:up.settings.multipart_params ===在此代码运行时未定义:

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