Question

我正在使用MVC C＃app中的Fineuploader（v5.3）的jquery包装器。

我的控制器检索一堆关于我的视图需要查看的元数据（'n'个文本字段和'n'个上传控件），然后传递给视图。 BAM。这里已经解决了创建这些动态上传控件的问题：Dynamic Multiple Upload Instances。我目前的问题略有不同，因为我需要一次性上传和表单发布（没有保存文件的中间位置）。另外，看到我不知道将从视图传递到控制器的内容，我正在利用字典集来跟踪重要的Id信息及其值。将文本集合从视图序列化到控制器工作得很好（即fieldName [0] .property = value。有关详细信息，请参阅Hanselman的模型绑定的有线格式here）。

那么，我的实际问题是什么？让这种线格式序列化适用于上传者的文件，并使其与表格一起正确发布。

所以，现在你现在是高级问题，让我开始更详细地解释。

以下是控制器型号：

以下是没有任何上传信息的表单帖子：您可以在此处查看有线电子邮件格式。序列化很好。

在这里，我动态创建一个隐藏的html字段，添加一个键和值。它很好地序列化到UserText字典属性。看到这里：

这是我的 FineUploader jQuery代码。我正在利用Razor为实例添加一个计数器，因此每个都是唯一的。

$('#files-upload@(counter)').fineUploader({
    debug: false,
    autoUpload: false,
    template: 'qq-template-@(counter)',     
    form: {
        element : '@formId'
    },
    validation: {
        acceptFiles: ['image/*', 'application/acrobat', 'application/x-pdf', 'text/pdf', 'text/x-pdf'],
        allowedExtensions: ['jpeg', 'jpg', 'pdf', 'tif', 'tiff'],
        sizeLimit: 1024 * 1024 * 9,
        stopOnFirstInvalidFile: false
    },
    multiple: false
}).on('submitted', function (event, id, filename) {     
    alert('submitted from ' + @counter);
}).on('complete', function (event, id, filename, responseJSON) {
    var element = $("li[qq-file-id=" + id + "] .qq-upload-status-text");      
    element.html("Success");
    alert('complete individual from ' + @counter);
}).on('allComplete', function (succeeded, failed) {       
    alert('ALL complete from ' + @counter);
}).on('error', function (event, id, name, errorReason, xhr) {       
    alert('Error[@(counter)]: ' + errorReason);
});

将2个上传控件动态添加到表单并发布后：

$('#files-upload0').fineUploader('uploadStoredFiles');

$('#files-upload1').fineUploader('uploadStoredFiles');

$('#@formId').submit();

当我使用上传控件提交时，我看到此表单数据：。

我查看了setForm文档，但我不确定如何使用它：setForm我想知道我是否还需要onComplete事件等。

此外，如果对序列化集合使用Wire Format概念，我将在哪里更改传入文件的属性名称？例如，我想我需要有一个qqfile [0] .HttpPostedFile，qqfile [0] .ContentLength，qqfile [0] .InputStream等，所以序列化器可以关联并分配属性。根据目前发布的内容，只有第二个文件上传详细信息（llama.jpg）似乎遇到了问题。我想解释的是否有意义，或者你能想到一个更简单的方法吗？

Answer 1

setForm API方法允许您将Fine Uploader附加到特定的<form>元素。这对于注册创建Fine Uploader实例时不存在的表单或者目标表单已更改非常有用。

例如：

var uploader = new qq.FineUploader({});
uploader.setForm(document.querySelector('form'))

可以在文档网站上的form feature page找到更多详细信息。

动态创建Fineuploader并序列化表单数据（模型绑定的有线格式）

1 个答案: