用ServiceStack ss-utils.js上传文件

Question

我有一个工作申请表格作为建立在ServiceStack网站的一部分。我试图使用包含的ss-utils.js来利用内置的流畅验证，但我的表单没有发布用户的文件上传。下面是表单的相关片段:

<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 FORM上传文件需要enctype="multipart/form-data"，例如:

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

如果你想改变支持多个文件上传或改变UI表单的外观，我建议使用Fine Uploader，有一个例子显示如何使用Fine Uploader在HTTP基准示例。

而Imgur有一个简单的客户端HTML和服务器的例子

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