Question

我打算在我的项目中使用Uploadify或Plupload图像上传库。我想使用其中一个库的原因是允许用户一次选择多个文件，然后同时上传所有文件。

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

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

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

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

基本的Asp.Net FileUpload控件通过允许我与其余表单数据同时提交文件，为我提供了部分内容，但显然不允许用户选择一次多个文件。

Answer 1

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

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

这有意义吗？

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

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

Answer 2

Uploadify有一个选项。

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

Answer 3

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;
});

Answer 4

见下文。 “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) {

        }
    }
});

Uploadify或Plupload可以与其他表单数据同时上传所选文件吗？

4 个答案: