使用knockout js上传文件

文件上传使用knockout js无法正常工作。 我试过下面的代码,但没有工作。 请提一下我做错的地方。

这是我的文件控件和按钮。 我无法将所选文件从客户端发送到服务器。 请建议最好的方法是什么。

   ko.bindingHandlers.file = { init: function (element, valueAccessor) { alert('init'); $(element).change(function () { var file = this.files[0]; if (ko.isObservable(valueAccessor())) { valueAccessor()(file); } }); }  

我为我当前的项目提出了这个解决方案。

    

好像你需要一个自定义的敲除绑定文件上传。 有各种api / lib可用于处理所有具有附加function的错误情况。 试试这个: https : //github.com/TooManyBees/knockoutjs-file-binding

  function () { var files = $("#FileName").get(0).files; var data = new FormData(); for (var x = 0; x < files.length; x++) { data.append("file" + x, files[x]); } $.ajax({ type: "POST", url: '/api/Controller' + '/?id=' + id ), contentType: false, processData: false, data: data, success: function (result) {}, error: function (xhr, status, p3, p4) {} }); } 

您可以执行以下操作:

查看:

   
  • :

JS:

 var ViewModel = function() { var self = this; self.files= ko.observableArray([]); self.fileSelect= function (elemet,event) { var files = event.target.files;// FileList object // Loop through the FileList and render image files as thumbnails. for (var i = 0, f; f = files[i]; i++) { // Only process image files. if (!f.type.match('image.*')) { continue; } var reader = new FileReader(); // Closure to capture the file information. reader.onload = (function(theFile) { return function(e) { self.files.push(new FileModel(escape(theFile.name),e.target.result)); }; })(f); // Read in the image file as a data URL. reader.readAsDataURL(f); } }; }; var FileModel= function (name, src) { var self = this; this.name = name; this.src= src ; }; ko.applyBindings(new ViewModel()); 

您可以在链接中找到该演示: http : //jsfiddle.net/fPWFd/436/