如何将 <select> 字段添加到我的 plupload 表单？答案

【问题标题】：How can I add a <select> field to my plupload form?如何将 <select> 字段添加到我的 plupload 表单？
【发布时间】：2012-03-05 09:38:01
【问题描述】：

我正在关注这篇博文 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>

在阅读了关于 multipart 在使用 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 的修改版本）。

【问题讨论】：

表单提交了吗？
数据（文件）最终到达服务器端并成功存储 - 所以从这个意义上说，是的，表单确实被提交了。但是没有提交附加属性“冒险”。
afaik ajax/flash 调用相当于表单提交时的“return false”。换句话说，JS 会生成自己的 POST 请求来上传数据，但存储在 HTML 中的表单不会生成任何内容。 IMO 您需要将额外值作为 GET 参数添加到您提交的 URL
我已经意识到我对表单本身所做的并没有真正的效果。我已经阅读了 api 文档 plupload.com/plupload/docs/api/…> 但我似乎找不到任何帮助。我不清楚如何实施您的建议：“作为您提交的 URL 的 GET 参数的额外值” - 我认为这就是我使用 $.extend() 所做的
我不确定 plupload 是如何工作的，但看起来您上传到某个 URL。您可以尝试将参数添加到 url (?param=value)，但如果需要，您需要对它们进行转义。基本上，不是提交给http://some.url/for/upload，而是提交给http://some.url/for/upload?param=value。不过，您也许可以通过 plupload 的 api 来做到这一点......

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

【解决方案1】：

因此，在为此苦苦挣扎了一段时间后，我切换回了 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;
            },
        });
    });
});

【讨论】：

【解决方案2】：

我认为这是问题所在：up.settings.multipart_params === undefined when this code run：

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

【讨论】：