Dateiupload mit Knockout js

Question

Datei-Upload funktioniert nicht mit Knockout-Js. Ich habe versucht mit unten Code aber nicht funktioniert. Bitte erwähne, wo ich falsch liege.

Dies ist meine Dateisteuerung und Schaltfläche. Ich kann die ausgewählte Datei nicht von der Clientseite an den Server senden. Bitte schlagen Sie vor, was der beste Ansatz dafür ist.

<input id="files" name="files" type="file" class="input-file" data-bind="file: FileProperties.FileName"/> 
<button data-bind="click : Upload">Upload</button> 

<script type="text/javascript"> 

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

Answer 1

Scheint, Sie benötigen eine benutzerdefinierte Knockout-Bindung für das Hochladen von Dateien. Es gibt verschiedene APIs/Bibliotheken, die alle Fehlerfälle mit zusätzlichen Funktionen behandeln. Versuchen Sie dies: https://github.com/TooManyBees/knockoutjs-file-binding

Answer 2

Ich kam mit dieser Lösung für mein aktuelles Projekt.

<img class="myImage" data-bind="attr: {src: $root.photoUrl() || 'images/tempImage.png'}"/> 
<input data-bind="event: {change: $root.fileUpload}" type="file" accept="image/*" class="fileChooser"/> 

<script> 
var myController = function() 
{ 
    var self = this; 
    this.photoUrl = ko.observable();  
    this.fileUpload = function(data, e) 
    { 
     var file = e.target.files[0]; 
     var reader = new FileReader(); 

     reader.onloadend = function (onloadend_e) 
     { 
      var result = reader.result; // Here is your base 64 encoded file. Do with it what you want. 
      self.photoUrl(result); 
     }; 

     if(file) 
     { 
      reader.readAsDataURL(file); 
     } 
    }; 
}; 
</script> 

Answer 3

<input type="file" id="FileName" style="width:180px" data-bind="value:addModel.InputFileName" /> 

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) {} 
    }); 
}