使用 ServiceStack ss-utils.js 上传文件

Question

我在 ServiceStack 上建立的网站中有一份工作申请表。我正在尝试使用包含的 ss-utils.js 来利用内置的 Fluent Validation，但我的表单没有 post 用户的文件上传。这是表格的相关片段：

<form id="form-careerapplication" action="@(new CreateCareerApplication().ToPostUrl())" method="post">
<div class="error-summary"></div>

<div class="form-group">
    <label>
        Upload Resume
    </label>
    <input type="file" id="Resume" name="Resume" />
    <span class="help-block"></span>
</div>

<input type="hidden" name="Id" value="@Model.Id" />
<input type="submit" value="Submit Application" />
</form>

<div id="success" class="hidden">
Thank you for your application.
</div>

$("#form-careerapplication").bindForm({
    success: function (careerApplicationResponse) {
        $("#form-careerapplication").addClass("hidden");
        $("#success").removeClass("hidden");
    },
    ...

我在 ss-utils.js 中遗漏了什么吗？或者有没有一种方法可以覆盖/补充 submit 行为以使用 FormData?

Answer 1

通过 HTML 表格上传文件需要 enctype="multipart/form-data"，例如：

<form id="form-careerapplication" action="@(new CreateCareerApplication().ToPostUrl())" 
     method="post" enctype="multipart/form-data">
...
</form>

如果你想改变支持多文件上传或改变 UI 表单的外观我推荐 Fine Uploader, there's an example showing how to use Fine Uploader on the HTTP Benchmarks Example.

虽然 Imgur 有一个简单的 client HTML and Server example。

Answer 2

原来我可以使用 beforeSend 选项作为传递给 bindForm 的配置的一部分来覆盖正在发送的数据。这有点 hack，但它奏效了，我保留了原始的 ss-utils.js 流畅验证！

$("#form-careerapplication").bindForm({
    success: function (careerApplicationResponse) {
        ....
    },
    error: function (error) {
        ....
    },
    contentType: false,
    processData: false,
    beforeSend: function (x, settings) {
        var fd = new FormData();
        // Tweaked library from https://github.com/kflorence/jquery-deserialize/blob/master/src/jquery.deserialize.js
        // Used to translate the serialized form data back into 
        // key-value pairs acceptable by `FormData`
        var data = $.fn.deserialize(settings.data);
        $.each(data, function (i, item) {
            fd.append(item.name, item.value);
        });

        var files = $('#form-careerapplication').find("input:file");
        $.each(files, function (i, file) {
            fd.append('file', file.files[0], file.files[0].name);
        });
        settings.data = fd;
    }
});

使用 ServiceStack ss-utils.js 上传文件

Upload a file with ServiceStack ss-utils.js

servicestack