如何使用knockout js和jquery上传包含图像和文本字段的表单？ [英] How to upload a form with both an image and text fields using knockout js and jquery?

问题描述

大家好。

我正在使用淘汰赛js。我想将图像上传到文件夹，其他数据保存到数据库。

这是html代码

< form method =postenctype =multipart / form -data>

< input type =textid =txtenodata-bind =value：$ root.PersonIddisabled =disabled/>

< input type =textid =txtenamedata-bind =value：$ root.PersonName/>

< input type =fileid = filedata-bind =file：{data：Photo，name：PersonPhoto，reader：someReader}/>

button data-bind =click：$ root.save>保存< /按钮>

< / form>

和javascript代码

Hi every one
I am working with knockout js. I want to upload an image to the folder and other data save to database.
This is html code
<form method="post" enctype="multipart/form-data">
<input type="text" id="txteno" data-bind="value: $root.PersonId" disabled="disabled" />
<input type="text" id="txtename" data-bind="value: $root.PersonName" />
<input type="file" id="file" data-bind="file: {data: Photo, name: PersonPhoto, reader: someReader} " />
button data-bind="click :$root.save">Save</button>
</form>
and javascript code

var ViewModel = function () {

               var self = this;
               self.PersonId = ko.observable("0");
               self.PersonName = ko.observable("");
               self.PersonPhotourl = ko.observable("");
               self.Photo = ko.observable();
               someReader= new FileReader()

               var PerData = {
                   PersonId: self.PersonId,
                   PersonName: self.PersonName,
                   Photo: self.Photo,
               };

               self.save = function () {
                   //Ajax call to Insert the Employee
                   $.ajax({
                       type: "POST",
                        url: "/Person/FileUpload",                                               
                        data: ko.toJSON(PerData),
                        contentType: "application/json",
                        dataType: 'json',
                        //cache: false,
                        mimeType: "multipart/form-data",
                        //processData: false,
                       success: function () {
                           alert("successful");
                       },
                       error: function () {
                           alert("fail");
                       }
                   });
               };
           };
           var vm = new ViewModel();
           ko.applyBindings(vm);

和我的行动结果

public ActionResult Upload（Person item，HttpPostedFileBase files）

{

//一些代码

}

我的图像没有发送到控制器

谢谢

and my action result
public ActionResult Upload(Person item, HttpPostedFileBase files)
{
//some code
}
My image not sending to controller
Thank you

推荐答案

root.PersonIddisabled =disabled/>

< input type =textid = txtenamedata-bind =value：

root.PersonId" disabled="disabled" />
<input type="text" id="txtename" data-bind="value:

root.PersonName/>

< input type =fileid =filedata- bind =file：{data：Photo，name：PersonPhoto，reader：someReader}/>

button data-bind =click：

root.PersonName" />
<input type="file" id="file" data-bind="file: {data: Photo, name: PersonPhoto, reader: someReader} " />
button data-bind="click :

root .save>保存< /按钮>

< / form>

和javascript代码

root.save">Save</button>
</form>
and javascript code

var ViewModel = function () {

               var self = this;
               self.PersonId = ko.observable("0");
               self.PersonName = ko.observable("");
               self.PersonPhotourl = ko.observable("");
               self.Photo = ko.observable();
               someReader= new FileReader()

               var PerData = {
                   PersonId: self.PersonId,
                   PersonName: self.PersonName,
                   Photo: self.Photo,
               };

               self.save = function () {
                   //Ajax call to Insert the Employee

这篇关于如何使用knockout js和jquery上传包含图像和文本字段的表单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！