ノックアウトjsを使用したファイルアップロード

Question

ノックアウトjsを使用してファイルアップロードが動作しません。私は以下のコードで試しましたが、動作しません。私が間違っている箇所に言及してください。

これは私のファイルコントロールとボタンです。選択したファイルをクライアント側からサーバーに送信できません。これに最善のアプローチが何かをお勧めします。

Answer 1

ファイルアップロード用のカスタムノックアウトバインディングが必要なようです。追加の機能を備えたすべてのエラーケースを処理する、さまざまなAPI/libが用意されています。 これを試してみてください： https://github.com/TooManyBees/knockoutjs-file-binding

Answer 2

私の現在のプロジェクトでは、この解決策を考え出しました。

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