Question

我正在尝试使用ASP.NET MVC将我的淘汰赛VM归入Blueimp文件上传。

我想要实现的目标是：

使用KO视图模型绑定表单数据
在按钮上单击
在动作中，接收表单数据作为参数，并以任何可能的方式访问文件数据
还需要上传多个文件

序列如下：

这就是我到目前为止的原因：

HTML

<form action="/Test/Post" method="post" enctype="multipart/form-data">
<div>
    <label for="Id" >Id</label>
    <input data-bind="value: Id" class="text-box single-line" 
       data-val="true" data-val-number="The field Id must be a number."
       data-val-required="The Id field is required." id="Id" 
       name="Id" type="number" value="" />
</div>
<div>
    <label  for="ImageUpload">Image Upload</label>
    <input id="ImageUpload" name="ImageUpload" type="file" value="" />
</div>
</form>
<button type="submit" data-bind="click: upload">Create</button>
<script>
    $(document).ready(function() {
        ko.applyBindings(new myVm({Id: 0, Something: 0}));
    });
</script>

FileUpload Init

$('input:file').fileupload({
    dataType: 'json',
    autoUpload: false, // do not auto upload on file select
});

KO脚本

function myVm(data) {
    var self = this;

    // Write mapping config
    var mappingConfig = {};

    // Perform mapping
    ko.mapping.fromJS(data, mappingConfig, self);

    // Upload
    self.upload = function () {
        $('#ImageUpload').bind('fileuploadsubmit', function (e, data) {
            // Bind JS form
            data.formData = ko.mapping.toJS(self);
        });

        // this doesn't trigger the binding to fileuploadsubmit
        $('form').submit();
    };
};

Knockout + Blueimp Fie上传

0 个答案: