html输入文件与淘汰表绑定

Question

I have a viewModel named MainViewModel .

var MainViewModel = function(){
    this.selectedFiles = ko.observableArray();

    this.onFileSelectedEvent = function(evt){

    }
}

and I have an HTML page that includes input that type is file.

<input type="file" data-bind="event:{ change: onFileSelectedEvent }"/>

I want to fill selectedFiles with onFileSelectedEvent handler. But onFileSelectedEvent parameter is coming type of MainViewModel it does not include selected files.

How can I handle selected files?

Answer 1

Inside your event binding handler by default the second parameter is the event object:

var MainViewModel = function(){
    var self = this;
    self.selectedFiles = ko.observableArray();

    self.onFileSelectedEvent = function(vm, evt){
        ko.utils.arrayForEach(evt.target.files,  function(file) {
            self.selectedFiles.push(file.name);
        });
    }
}

Demo JSFiddle .

The first parameter is the current data context so in your case the MainViewModel