Asp.net mvc 3 正在寻找使用asp.net mvc3上载文件的好示例&；knockout.js

我试图寻找一个使用asp.net mvc3和knockout.js进行多文件上传的综合性好例子。我一直在四处寻找，但没有任何东西显示从开始到结束的解决方案！有一些示例显示了敲除绑定需要是什么，但没有显示如何读取“控制器”中的文件。目标是将文件上传并保存到数据库。保存到AWS S3存储的示例是一个加号。请帮忙

ko绑定：

<input type="file" data-bind="value: fileToUpload, fileUpload: fileToUpload, url : 'Client/Upload' " /> 

ko.bindingHandlers.fileUpload = {
     update: function (element, valueAccessor, allBindingsAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor())
            if (element.files.length && value) {
                var file = element.files[0];
                var url = allBindingsAccessor().url


xhr = new XMLHttpRequest();
            xhr.open("post", url, true);
            xhr.setRequestHeader("Content-Type", "image/jpeg");
            xhr.setRequestHeader("X-File-Name", file.name);
            xhr.setRequestHeader("X-File-Size", file.size);
            xhr.setRequestHeader("X-File-Type", file.type);
            console.log("sending")
            // Send the file (doh)
            xhr.send(file);
        }
    }
}



[HttpPost]
        public ActionResult Upload()
        {
           //Not sure what to do here.
        }

ko.bindingHandlers.fileUpload={
更新：函数（元素、valueAccessor、allBindingsAccessor）{
var value=ko.utils.unwrapobbservable（valueAccessor（））
if（element.files.length&&value）{
var file=element.files[0]；
var url=allBindingsAccessor（）.url
xhr=newXMLHttpRequest（）；
xhr.open（“post”，url，true）；
setRequestHeader（“内容类型”、“图像/jpeg”）；
setRequestHeader（“X-File-Name”，File.Name）；
setRequestHeader（“X-File-Size”，File.Size）；
setRequestHeader（“X-File-Type”，File.Type）；
控制台日志（“发送”）
//发送文件（doh）
发送（文件）；
}
}
}
[HttpPost]
公共行动结果上载（）
{
//我不知道该怎么办。
}

---

还需要做多个文件上传吗？不知道如何设置viewmodels。

在javascript方面，我建议使用fineuploader。您可以创建自定义绑定，以使用响应更新viewmodel

<div data-bind="fileupload: viewModel.fileName"></div>

ko.bindingHandlers.fileUpload = {
 init: function (element, valueAccessor) {
       var $element = $(element);
       var fileNameVal = valueAccessor;
       var uploader = new qq.FineUploader({
          element: $element[0],
          request: {
            endpoint: 'server/your_upload_service'
          },
           multiple: true,
           validation: {
              allowedExtensions: ['jpeg', 'jpg', 'txt']
           },
          callbacks: {
             onComplete: function(id, fileName, responseJSON) {
                 if (responseJSON.success) {
                   // update your value
                   valueAccessor(fileName)
                   //may need to change this if you pass a reference back 
                   // in your responseJSON such as an s3 key
                }
             }
          }
       });
    }
};

ko.bindingHandlers.fileUpload={
init：函数（元素、值访问器）{
变量$element=$（element）；
var fileNameVal=valueAccessor；
var uploader=new qq.FineUploader({
元素：$element[0]，
请求：{
端点：“服务器/您的上传服务”
},
多重：对，
验证：{
允许的扩展：['jpeg'，'jpg'，'txt']
},
回调：{
onComplete:函数（id、文件名、responseJSON）{
if（responseJSON.success）{
//更新你的价值观
valueAccessor（文件名）
//如果您将引用传递回，则可能需要更改此设置
//在您的响应中，例如s3键
}
}
}
});
}
};

至于服务器端，我不熟悉ASP.net，但您应该能够与端点上的请求数据交互，并提取包含图像数据的多部分编码表单部分

我想看看这些答案

---

还要注意的是，fineuploader在请求中发送的文件带有键“qqfile”

编辑了我现在使用的示例代码。看起来像一个伟大的工具，但我正在寻找免费版本。我也没有看到一个试用版。你可以自己制作，这是麻省理工学院的许可证。费用是15美元一次，用于支持项目维护人员。我明白了，谢谢。所以我添加了你建议的装订，但似乎不起作用。这里是我正在处理的测试项目的链接。你能让我看看吗。你能告诉我你在你的项目中在哪里实现了绑定，或者在JSFIDLE中做了一个演示吗