1

我计划在我的项目中使用 Uploadify 或 Plupload 图像上传库。我想使用其中一个库的原因是允许用户一次选择多个文件，然后一次上传它们。

我的目标是将其中一个文件上传控件放在一个表单上，除了选择一堆图像外，它还允许用户在其中输入其他数据。然后，用户应该能够提交表单并将他们输入的数据和他们选择的图像上传并在服务器上进行处理。

我遇到的问题是这些文件上传控件要求用户在提交实际的 aspx 页面之前将选定的文件上传到服务器。最后，这给用户带来了困惑。他们首先必须提交图像，然后提交包含其余数据的表单。

我的问题是，有没有办法让 Uplodify 或 Plupload 仅在用户实际单击表单的提交按钮时才将所选文件发送到服务器？我不希望用户先将文件上传到服务器上的临时文件夹，然后单独提交表单。

这将要求我必须在临时文件夹中找到那些上传的文件，并将它们与稍后在表单上提交的数据相关联。

基本的 Asp.Net FileUpload 控件为我提供了部分我想做的事情，它允许我在提交其他表单数据的同时提交文件，但它显然不允许用户在以下位置选择多个文件一次。

4

4 回答 4

3

您可以运行一个 Plupload 实例，允许用户选择他们的图像（文件），将自动上传设置为 false。

然后，当用户单击提交时，您可以触发 ajax 调用以提交表单，然后在提交表单数据后将上传作为单独的 JS 事件触发。

那有意义吗？

如果您需要一些资源，这里是一个使用我构建的 Plupload 的自定义 UI 示例。

http://www.foliotek.com/devblog/plupload-custom-file-upload-ui/

于 2011-12-20T14:39:17.013 回答
2

Uploadify 有一个选项。

如果您设置auto为 false 然后调用uploadifyUpload您为表单定义的提交处理程序。

于 2011-12-19T17:36:23.347 回答
1

Plupload 非常灵活，实际上人们在 Plupload 下所理解的通常只是一个 UI 或 jQuery 小部件。但事实并非如此——Plupload 是纯 JavaScript API，可以用来构建自己的自定义实现。您所说的 - 单击提交按钮时上传文件也是可能的。实际上，Plupload 捆绑包附带的一个示例就显示了这一点（参见：examples/jquery/jquery_ui_widget.html）：

// Client side form validation
$('form').submit(function(e) {
    var uploader = $('#uploader').plupload('getUploader');

    // Files in queue upload them first
    if (uploader.files.length > 0) {
        // When all files are uploaded submit form
        uploader.bind('StateChanged', function() {
            if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                $('form')[0].submit();
            }
        });

        uploader.start();
    } else
        alert('You must at least upload one file.');

    return false;
});
于 2011-12-25T08:12:42.530 回答
0

见下文。“multipart_params”包含表单数据。我使用 plupload 中的普通提交按钮来触发表单。

var uploader = jQuery("#html5_uploader").pluploadQueue({
    runtimes : 'html5,html4',
    url : '/upload/',
    max_file_size : '100mb',
    chunk_size: '1mb',
    unique_names : false,
    multipart: true,
    multipart_params: { 'start': jQuery('#start').val(), 'end': jQuery('#end').val(), 'ftype': jQuery('#ftype').val() },
    headers : {'X-Requested-With' : 'XMLHttpRequest'},
    preinit : {
        BeforeUpload: function(up, file) {
            up.settings.multipart_params = { 'start': jQuery('#start').val(), 'end': jQuery('#end').val(), 'ftype': jQuery('#ftype').val() };
        }, 
        FileUploaded: function(Up, File, Response) {

        }
    }
});
于 2012-04-29T22:43:21.167 回答