dosya yükleme knockout ile js

Question

Dosya yükleme knockout js. Aşağıdaki kodla çalıştım ama çalışmıyor. Lütfen yanlış yaptığım yeri belirtin.

Bu benim dosya denetimi ve düğmedir. Seçilen dosyayı istemciden sunucuya gönderemiyorum. Lütfen bunun için en iyi yaklaşımın ne olduğunu öner.

<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

Dosya karşıya yükleme için özel bir nakavt bağlantısına ihtiyacınız var gibi görünüyor. Tüm hata durumlarını ek özelliklerle ele alan çeşitli api/lib'leri vardır. Bunu deneyin: https://github.com/TooManyBees/knockoutjs-file-binding

Answer 2

Güncel projem için bu çözümden geldim.

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