如何将文件上传器对象从knockout viewModel发布到mvc HttpPostFileBase对象 [英] How to Post file uploader object from knockout viewModel to mvc HttpPostFileBase object

问题描述

我正在使用knockout.js。我使用文件上传的形式使用knockout将表格发布到mvc控制器。当我发布ViewModel时，每个东西都正确发布但文件对象始终为null。任何一个帮助我如何在httpPostFileBase中传递文件对象。







这是UI

i am working with knockout.js. i post a form using knockout to mvc controller in the form i use a file upload. when i post ViewModel every thing is post properly but the file object always null. any one help me how to pass file object in httpPostFileBase.



This is UI

<script type="text/javascript" src="~/Scripts/App/AdminScript.js"></script>
<script type="text/javascript" src="~/Scripts/App/fileBindler.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        window.ko.applyBindings(new CategoryViewModel());

    });
</script>
    <div id="divEditCategory">
        <h2>Edit Category</h2>
        <div data-bind="with:currentCategory">
            <p>Category Name: <input type="text" placeholder="Category Name" class="form-control" data-bind="value:CategoryName" /></p>
            <p>Category Name: <input type="file" id="imgPath" accept="image/*" data-bind="value: ImagePath" /></p>
            <p><input type="checkbox" data-bind="value:IsActive" />Is Active</p>
        </div>
        <p><input type="button" id="sendCategory" class="btn btn-success" value="Save" data-bind="click: saveCategory" /></p>
    </div>

这是我的ViewModel

And this is my ViewModel

function Category(categoryName, imagePath, isActive)
{
    var fd = new FormData();
    var self = this;
    self.CategoryName = ko.observable(categoryName);
    self.IsActive = ko.observable(isActive),
    self.ImagePath,  = ko.observable(imagePath),
}
function CategoryViewModel()
{
    var self = this;

    self.currentCategory = ko.observable(new Category("","", true));

    self.saveCategory = function () {
        debugger;
        var json1 = ko.toJSON(self.currentCategory);
        debugger;
        $.ajax({
            url: '/Admin/EditCategory',
            type: 'POST',
            dataType: 'json',
            data: json1,
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                var message = data.Message;
            }
        });
    }

}

推荐答案

（document）.ready（function（）{
window.ko.applyBindings（new CategoryViewModel（））;

}）;
< / script >
< div id = divEditCategory >
< h2 < span class =code-keyword>> 编辑类别< / h2 < span class =code-keyword>>
< div data-bind = with：currentCategory >
< p > 类别名称： < 输入 类型 = text 占位符 = 类别名称 class = < span class =code-keyword> form-control data-bind = value：CategoryName / > < / p >
< p > 类别名称：< 输入 type = file id = imgPath < span class =code-attribute> accept = image / * data-bind = 值：ImagePath / > < < span class =code-leadattribute> / p >
< p > < input type = 复选框 data- bind = value：IsActive / > 是否有效< / p >
< / div >
< p > < 输入 类型 = 按钮 id = sendCategory class = btn btn-success value = 保存 data-bind = click：saveCategory / > < / p >
< / div >

(document).ready(function () { window.ko.applyBindings(new CategoryViewModel()); }); </script> <div id="divEditCategory"> <h2>Edit Category</h2> <div data-bind="with:currentCategory"> <p>Category Name: <input type="text" placeholder="Category Name" class="form-control" data-bind="value:CategoryName" /></p> <p>Category Name: <input type="file" id="imgPath" accept="image/*" data-bind="value: ImagePath" /></p> <p><input type="checkbox" data-bind="value:IsActive" />Is Active</p> </div> <p><input type="button" id="sendCategory" class="btn btn-success" value="Save" data-bind="click: saveCategory" /></p> </div>

这是我的ViewModel

And this is my ViewModel

function Category(categoryName, imagePath, isActive)
{
    var fd = new FormData();
    var self = this;
    self.CategoryName = ko.observable(categoryName);
    self.IsActive = ko.observable(isActive),
    self.ImagePath,  = ko.observable(imagePath),
}
function CategoryViewModel()
{
    var self = this;

    self.currentCategory = ko.observable(new Category("","", true));

    self.saveCategory = function () {
        debugger;
        var json1 = ko.toJSON(self.currentCategory);
        debugger;

.ajax（{
url：' / Admin / EditCategory'，
类型：' POST'，
dataType：' json'，
data：json1，
contentType：' application / json; charset = utf-8'，
success：function（数据）{
var message = data.Message;
}
}）;
}

}

.ajax({ url: '/Admin/EditCategory', type: 'POST', dataType: 'json', data: json1, contentType: 'application/json; charset=utf-8', success: function (data) { var message = data.Message; } }); } }

这篇关于如何将文件上传器对象从knockout viewModel发布到mvc HttpPostFileBase对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！